PressFastStatic Page
Create a static page in your app
Static Page
Learn how to create a static page in your Next.js app.
Creating a New Page
In Next.js App Router, each folder in /app represents a route segment.
Step 1: Create a New Route
Create a new folder in /app/[locale]:
mkdir -p app/[locale]/aboutStep 2: Add a Page Component
Create a page.tsx file:
// app/[locale]/about/page.tsx
export default function AboutPage() {
return (
<main className="container mx-auto px-4 py-8">
<h1 className="text-4xl font-bold mb-4">About Us</h1>
<p className="text-lg text-gray-600">
Welcome to our about page!
</p>
</main>
);
}Step 3: Add Metadata
Add metadata for SEO:
// app/[locale]/about/page.tsx
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'About Us',
description: 'Learn more about our company',
};
export default function AboutPage() {
return (
<main className="container mx-auto px-4 py-8">
<h1 className="text-4xl font-bold mb-4">About Us</h1>
<p className="text-lg text-gray-600">
Welcome to our about page!
</p>
</main>
);
}Dynamic Routes
Create dynamic routes using brackets:
mkdir -p app/[locale]/blog/[slug]// app/[locale]/blog/[slug]/page.tsx
export default function BlogPost({
params,
}: {
params: { slug: string };
}) {
return (
<main>
<h1>Blog Post: {params.slug}</h1>
</main>
);
}