Privacy & Terms Pages
Create and link Privacy Policy and Terms of Service pages to your footer
The footer already has links to Privacy and Terms pages. This guide shows you how to create those pages and customize the footer links.
What's Already Set Up
Your site configuration already includes footer links to /privacy and /terms. You just need to create the actual pages. If you visit these URLs now, you'll see a 404 error.
Quick Start (3 Steps)
Create the Privacy Policy Page
Create a new file at src/app/privacy/page.tsx:
1import { Metadata } from "next";2import { PublicLayout } from "@/components/layout";3import { siteConfig } from "@/config/site.config";4import { formatDate } from "@/lib/utils/date";5 6export const metadata: Metadata = {7 title: `Privacy Policy | ${siteConfig.metadata.name}`,8 description: `Privacy Policy for ${siteConfig.metadata.name}`,9};10 11export default function PrivacyPage() {12 return (13 <PublicLayout>14 <div className="mx-auto max-w-3xl px-4 py-16">15 <h1 className="text-4xl font-bold text-primary-900 dark:text-primary-100">16 Privacy Policy17 </h1>18 <p className="mt-4 text-primary-600 dark:text-primary-400">19 Last updated: {formatDate(new Date())}20 </p>21 22 <div className="mt-8 space-y-8 text-primary-700 dark:text-primary-300">23 <section>24 <h2 className="text-xl font-semibold text-primary-900 dark:text-primary-100 mb-3">25 1. Information We Collect26 </h2>27 <p>28 We collect information you provide directly to us, including your name, 29 email address, and payment information when you create an account or 30 make a purchase.31 </p>32 </section>33 34 <section>35 <h2 className="text-xl font-semibold text-primary-900 dark:text-primary-100 mb-3">36 2. How We Use Your Information37 </h2>38 <p>39 We use the information we collect to provide, maintain, and improve 40 our services, process your transactions, and send you technical notices 41 and support messages.42 </p>43 </section>44 45 <section>46 <h2 className="text-xl font-semibold text-primary-900 dark:text-primary-100 mb-3">47 3. Data Security48 </h2>49 <p>50 We implement appropriate technical and organizational measures to 51 protect your personal data against unauthorized access, alteration, 52 disclosure, or destruction.53 </p>54 </section>55 56 <section>57 <h2 className="text-xl font-semibold text-primary-900 dark:text-primary-100 mb-3">58 4. Contact Us59 </h2>60 <p>61 If you have any questions about this Privacy Policy, please contact us 62 at support@yourdomain.com.63 </p>64 </section>65 </div>66 </div>67 </PublicLayout>68 );69}Create the Terms of Service Page
Create a new file at src/app/terms/page.tsx:
1import { Metadata } from "next";2import { PublicLayout } from "@/components/layout";3import { siteConfig } from "@/config/site.config";4import { formatDate } from "@/lib/utils/date";5 6export const metadata: Metadata = {7 title: `Terms of Service | ${siteConfig.metadata.name}`,8 description: `Terms of Service for ${siteConfig.metadata.name}`,9};10 11export default function TermsPage() {12 return (13 <PublicLayout>14 <div className="mx-auto max-w-3xl px-4 py-16">15 <h1 className="text-4xl font-bold text-primary-900 dark:text-primary-100">16 Terms of Service17 </h1>18 <p className="mt-4 text-primary-600 dark:text-primary-400">19 Last updated: {formatDate(new Date())}20 </p>21 22 <div className="mt-8 space-y-8 text-primary-700 dark:text-primary-300">23 <section>24 <h2 className="text-xl font-semibold text-primary-900 dark:text-primary-100 mb-3">25 1. Acceptance of Terms26 </h2>27 <p>28 By accessing or using our service, you agree to be bound by these Terms of Service. 29 If you do not agree to these terms, please do not use our service.30 </p>31 </section>32 33 <section>34 <h2 className="text-xl font-semibold text-primary-900 dark:text-primary-100 mb-3">35 2. Use of Service36 </h2>37 <p>38 You may use our service only for lawful purposes and in accordance with these Terms. 39 You agree not to use the service in any way that could damage, disable, overburden, 40 or impair the service.41 </p>42 </section>43 44 <section>45 <h2 className="text-xl font-semibold text-primary-900 dark:text-primary-100 mb-3">46 3. Subscriptions and Payments47 </h2>48 <p>49 Some parts of our service are billed on a subscription basis. You will be billed 50 in advance on a recurring basis depending on the subscription plan you choose. 51 You may cancel your subscription at any time.52 </p>53 </section>54 55 <section>56 <h2 className="text-xl font-semibold text-primary-900 dark:text-primary-100 mb-3">57 4. Limitation of Liability58 </h2>59 <p>60 In no event shall we be liable for any indirect, incidental, special, consequential, 61 or punitive damages, including without limitation, loss of profits, data, use, 62 goodwill, or other intangible losses.63 </p>64 </section>65 66 <section>67 <h2 className="text-xl font-semibold text-primary-900 dark:text-primary-100 mb-3">68 5. Contact Information69 </h2>70 <p>71 For any questions about these Terms, please contact us at legal@yourdomain.com.72 </p>73 </section>74 </div>75 </div>76 </PublicLayout>77 );78}Update Your Contact Information
Replace the placeholder email addresses in both pages with your actual contact information:
- Change
support@yourdomain.comin the Privacy page - Change
legal@yourdomain.comin the Terms page
Using Environment Variables
You can also use environment variables for contact emails:
1SUPPORT_EMAIL="support@yourdomain.com"2LEGAL_EMAIL="legal@yourdomain.com"Then access them in your pages: process.env.SUPPORT_EMAIL
Customize Footer Links
The footer links are configured in src/config/site.config.ts. You can change the labels, add more links, or remove existing ones.
1navigation: {2 header: [3 { label: "Roadmap", href: "/roadmap" },4 { label: "Pricing", href: "/pricing" },5 { label: "Docs", href: "/guides" },6 ],7 footer: {8 links: [9 { label: "Privacy", href: "/privacy" },10 { label: "Terms", href: "/terms" },11 // Add more footer links here:12 { label: "Cookie Policy", href: "/cookies" },13 { label: "Contact", href: "/contact" },14 { label: "About", href: "/about" },15 ],16 showSocialLinks: false,17 copyrightText: "Built for developers who ship fast.",18 },19},Link Behavior
Footer links automatically use the Link component from Next.js, so they support client-side navigation. If you add external links (e.g.,https://example.com), they will still work but will cause a full page reload.
Important: Legal Content
Additional Pages You Might Need
Depending on your business and jurisdiction, you might also need these pages:
- Cookie Policy - Required in the EU for cookie consent
- Route:
/cookies
- Route:
- Refund Policy - Important for subscription businesses
- Route:
/refund
- Route:
- Acceptable Use Policy - Defines prohibited activities
- Route:
/acceptable-use
- Route:
- GDPR/Data Processing Agreement - For EU customers
- Route:
/gdpr
- Route:
To add any of these, follow the same pattern as the Privacy and Terms pages.
Next Steps
- Customize the content of your Privacy and Terms pages
- Consider adding a cookie consent banner if you use analytics
- Add links to these pages in your signup/login forms
- Keep your legal documents updated as your service evolves