Static page

Create a static page in Next.js App Router. This tutorial shows you how to create a simple static page.

Create a page

In the App Router, create a page by creating a page.tsx file in a folder:

app/about/page.tsx
1export default function AboutPage() {
2  return (
3    <div>
4      <h1>About Us</h1>
5      <p>Welcome to our SaaS!</p>
6    </div>
7  );
8}

Add metadata

Add metadata to your page for SEO:

app/about/page.tsx
1import { Metadata } from 'next';
2
3export const metadata: Metadata = {
4  title: 'About Us',
5  description: 'Learn more about our SaaS product',
6};
7
8export default function AboutPage() {
9  return (
10    <div>
11      <h1>About Us</h1>
12      <p>Welcome to our SaaS!</p>
13    </div>
14  );
15}

Add styling

Use Tailwind CSS for styling:

app/about/page.tsx
1export default function AboutPage() {
2  return (
3    <div className="max-w-4xl mx-auto px-6 py-12">
4      <h1 className="text-4xl font-bold mb-4">About Us</h1>
5      <p className="text-lg text-gray-600">
6        Welcome to our SaaS!
7      </p>
8    </div>
9  );
10}