Pages & Routing

Next.js uses file-based routing. Every file in the pages/ directory becomes a route automatically.

// pages/about.js
export default function About() {
  return <h1>About Page</h1>;
}

Navigation with Link

Use the Link component for client-side navigation without page reloads.

import Link from "next/link";

<Link href="/about">Go to About</Link>

Static Generation

Use getStaticProps to fetch data at build time. Great for blogs or docs where content doesn’t change often.

export async function getStaticProps() {
  return {
    props: {
      message: "Hello from SSG"
    }
  };
}

Server-Side Rendering

Use getServerSideProps to fetch data on each request. Perfect for dashboards or frequently updated data.

export async function getServerSideProps() {
  return {
    props: {
      time: new Date().toISOString()
    }
  };
}

Dynamic Routes

Brackets in filenames make dynamic routes. Example: pages/posts/[id].js.

// pages/posts/[id].js
import { useRouter } from "next/router";

export default function Post() {
  const router = useRouter();
  return <h1>Post: {router.query.id}</h1>;
}

API Routes

You can create backend endpoints inside pages/api/. Great for small APIs or server logic.

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: "Hello API" });
}

Static Assets

Store images, fonts, and other files in the public/ folder. Access them directly by URL.

<img src="/logo.png" alt="Logo" />

Head for SEO

Use the Head component from Next.js to add metadata like title and description for SEO.

import Head from "next/head";

<Head>
  <title>My Page</title>
</Head>

Image Optimization

The next/image component automatically optimizes images for performance and responsiveness.

import Image from "next/image";

<Image src="/logo.png" width={200} height={100} alt="Logo" />

Middleware

Middleware lets you run code before a request is completed. Useful for authentication, logging, or redirects.

// middleware.js
export function middleware(req) {
  return NextResponse.redirect(new URL("/login", req.url));
}

Environment Variables

Store secrets in .env.local. Access them with process.env. Prefix with NEXT_PUBLIC_ to expose to the browser.

NEXT_PUBLIC_API_URL=https://api.example.com

const url = process.env.NEXT_PUBLIC_API_URL;

Deployment

Next.js apps can be easily deployed on Vercel, the creators of Next.js. Just push to GitHub and connect your repo.

How to use this page

Start with pages and routing basics.
Learn getStaticProps and getServerSideProps for data fetching.
Practice building API routes for backend logic.
Use Head and next/image for SEO and performance.
Deploy on Vercel when your app is ready!

Next.js Cheatsheet