Set up a Next.js project to build fast, modern web applications with React.

Use this when starting a new project or learning the basics of Next.js for server-side rendering and static sites.

Initialize a Next.js app in your terminal:

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

Choose TypeScript during setup by adding '--typescript' to the command for better type safety.

Create pages effortlessly using Next.js’s file-based routing system.

Ideal for quickly setting up routes like /about or /blog without configuring a router.

Add a file named page.tsx in app/about/:

// app/about/page.tsx
'use client';

export default function About() {
  return <h1>About Page</h1>;
}

Use dynamic routes with [id]/page.tsx for pages like /post/1—check the docs for params handling.

Render pages on the server for SEO and faster initial loads with dynamic data.

Use SSR when you need fresh data on each request, like a news feed or user dashboard.

Fetch data in getServerSideProps:

// app/page.tsx
'use client';

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}
export default function Page({ data }) {
  return <div>{data.title}</div>;
}

Keep getServerSideProps lightweight—fetch only what’s needed to avoid slow load times.

Pre-render pages at build time for maximum performance and scalability.

Perfect for static content like blogs, documentation, or landing pages that don’t change often.

Use getStaticProps for SSG:

// app/page.tsx
'use client';

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  return { props: { posts } };
}
export default function Blog({ posts }) {
  return <ul>{posts.map(post => <li key={post.id}>{post.title}</li>)}</ul>;
}

Combine SSG with revalidation (revalidate: 10) to refresh static pages periodically.

Build backend endpoints within your Next.js app using API routes.

Use this for simple APIs, like form submissions or data fetching, without a separate server.

Create app/api/hello/route.ts:

// app/api/hello/route.ts
export async function GET(req) {
  return new Response(JSON.stringify({ message: 'Hello from Next.js!' }), { status: 200 });
}

Test your API route locally at http://localhost:3000/api/hello after running npm run dev.

Handle dynamic URLs like /post/[id] with Next.js’s dynamic routing.

Great for blog posts, product pages, or anything with variable slugs.

Create app/post/[id]/page.tsx:

// app/post/[id]/page.tsx
'use client';

export async function getStaticPaths() {
  return { paths: [{ params: { id: '1' } }], fallback: false };
}
export async function getStaticProps({ params }) {
  const post = { id: params.id, title: 'Post ' + params.id };
  return { props: { post } };
}
export default function Post({ post }) {
  return <h1>{post.title}</h1>;
}

Use fallback: 'blocking' in getStaticPaths for on-demand static generation of new paths.

Use Next.js’s <Image> component to automatically optimize and lazy-load images.

Perfect for improving performance on image-heavy pages like portfolios or galleries.

Add an image to your page:

// app/page.tsx
'use client';

import Image from 'next/image';

export default function Home() {
  return <Image src="/my-image.jpg" alt="Example" width={500} height={300} />;
}

Set priority on key images above the fold to prioritize their loading.

Leverage TypeScript in Next.js for better code quality and developer experience.

Use this for large projects or teams where type checking prevents bugs.

Define a typed component in app/page.tsx:

// app/page.tsx
'use client';

type Props = { message: string };

export default function Home({ message }: Props) {
  return <h1>{message}</h1>;
}
export async function getStaticProps() {
  return { props: { message: 'Hello, Layer!' } };
}

Run npm install --save-dev typescript @types/react @types/node if you didn’t start with TypeScript.