Create New Page

1. Create a new folder in the app/[locale]/(default) directory, create a new page.tsx file, and add content for the new page:

app/[locale]/(default)/new-page/page.tsx
1export default function NewPage() {
2  return (
3    <div className="min-h-screen bg-background">
4      <div className="container mx-auto px-4 py-16 md:py-24">
5        <div className="text-center max-w-3xl mx-auto">
6          <h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-foreground mb-4">
7            NEW PAGE
8          </h1>
9          <p className="text-xl text-muted-foreground mb-8">
10            This is an example of a new page, you can customize the content as needed.
11          </p>
12        </div>
13      </div>
14    </div>
15  );
16}

2. Visit the new page address in your browser to see the rendered content:

The new page will reuse the layout defined in the app/[locale]/(default)/layout.tsx file, displaying the Header and Footer by default.

If you want your new page to have a different layout, you need to create a new Layout file. For specific steps, refer to the NextJS Layout documentation NextJS Pages and Layouts