TOS Template

This guide explains how to set up and use the Terms of Service (ToS) template in your SSK project. The ToS page includes dynamic content such as company name, email, and other environment variables for easy configuration.

Steps to Use the Template

1. Create a ToS Page

First, create a directory for your Terms of Service page under the apps/<app-name> folder:

apps/<app-name>/tos/page.tsx

Inside this file, copy the TermsOfService component code provided. This template dynamically pulls information from environment variables, such as the company name, product name, and contact email.

2. Set Environment Variables

Make sure to set the required environment variables in your .env file:

NEXT_PUBLIC_COMPANY_NAME=YourCompanyName
NEXT_PUBLIC_PRODUCT_NAME=YourProductName
NEXT_PUBLIC_EMAIL=[e-mail]
NEXT_PUBLIC_WEBSITE_CONTACT=https://www.yourcompany.com/contact
NEXT_PUBLIC_COUNTRY=YourCountry

These environment variables will be used in the Terms of Service template for personalization, such as in the company name, contact email, and website.

3. Define Metadata for the ToS Page

The ToS template allows you to define custom metadata for the page. This metadata can be used for SEO and Open Graph purposes.

In the page.tsx file, define the metadata object:

export const metadata: Metadata = TermsOfService.metadata

This ensures the correct usage without unnecessary redefinition of metadata.

4. Customize the Content

The Terms of Service template includes sections for legal terms like User Data and Security, Prohibited Conduct, Ownership and Rights, etc. You can modify or add additional sections as needed to suit your business requirements.

5. Render the ToS Page

Finally, you can render the Terms of Service page in your application’s routing configuration. The file located at apps//tos/page.tsx will automatically be picked up by Next.js as a route.

import React from 'react'

import { type Metadata } from 'next'

import Page from '@core/ui/Page'
import TermsOfService from '@core/ui/TermsOfService'

export const metadata: Metadata = TermsOfService.metadata

export default function TermsOfServicePage() {
  return (
    <Page>
      <TermsOfService />
    </Page>
  )
}

With this guide, you can easily create a professional Terms of Service page in your project, complete with SEO optimizations and dynamic content.