Adding Pages

To add a new page to the marketing site of your Next.js project, you can create a new page in the src/app/(site) directory.

By "marketing site", we mean the public pages of your project, such as the homepage, the about page, the contact page, etc.

Adding a new page to the marketing site

As you know already, we can add pages to our Next.js App Router application by creating files within the src/app directory named as page.tsx.

For example, if you want to add a page at /about, you can create a new file at src/app/(site)/about/page.tsx with the following content:

function AboutPage() {
  return <div>About page</div>;
}
 
export default AboutPage;

This page will automatically inherit the site layout from src/app/(site)/layout.tsx - which means it will already display the header and footer.

I don't want to use the same layout though?

If you don't want to use the site layout, create a route group inside src/app, and add your page there.

Adding a new page to the marketing site with translations

If you have translations on your marketing site - to ensure the page is translated correctly server-side, we use the withI18n HOC:

import { withI18n } from '~/i18n/with-i18n';
 
function AboutPage() {
  return <div>About page</div>;
}
 
export default withI18n(AboutPage);