Next Js Cheat Sheet

Next.js — Beginner Cheat Sheet

1. What Is Next.js?

Next.js is a React framework used to build fast, SEO-friendly, full-stack web applications.

Unlike plain React, Next.js supports:

  • Server-side rendering

  • Static generation

  • API routes

  • File-based routing

All out of the box.

2. Why Next.js?

Next.js solves real React problems:

  • Better SEO

  • Faster page loads

  • Built-in routing

  • Backend support

  • Production optimizations

It’s used for modern web apps and SaaS products.

3. Creating a Next.js App

npx create-next-app myApp
cd myApp
npm run dev

This creates a full project with routing and build tools ready.

4. Project Structure

app/ or pages/
public/
styles/
next.config.js

  • app or pages → routing

  • public → static assets

  • styles → CSS

  • next.config.js → configuration

5. Pages vs App Router

Pages Router (older)

Uses pages/ folder.

App Router (modern)

Uses app/ folder with layouts and server components.

New projects use App Router.

6. Basic Page

export default function Home(){
 return <h1>Hello</h1>
}

Each file automatically becomes a route.

7. File-Based Routing

app/page.js → /
app/blog/page.js → /blog

Folder structure defines URLs.

No router config needed.

8. Dynamic Routes

app/posts/[id]/page.js

Creates routes like:

/posts/123

Used for details pages.

9. Catch-All Routes

[...slug]

Handles multiple segments dynamically.

10. Layouts

app/layout.js

Shared UI (navbar/footer) across pages.

Runs once for entire app.

11. Nested Layouts

Each folder can have its own layout.

Used for dashboards and sections.

12. Metadata (SEO)

export const metadata = {
 title: "Home"
}

Controls page title and SEO tags.

13. Public Folder

Store images and static files.

/public/logo.png

Access directly:

/logo.png

14. Image Component

import Image from "next/image"

Automatically optimizes images.

15. Link Component

import Link from "next/link"

Used for client-side navigation.

Faster than <a> tags.

16. Client vs Server Components

Server Component (default)

Runs on server.

Client Component

"use client"

Required when using hooks or browser APIs.

17. useState / useEffect

Only allowed in client components.

"use client"

Used for interactivity.

18. Styling Options

  • CSS Modules

  • Global CSS

  • Tailwind

  • Inline styles

Next.js supports all.

19. CSS Modules

page.module.css

Scoped styles per component.

20. Environment Variables

.env.local

Access using:

process.env.MY_KEY

Used for secrets.

Data Fetching

21. Fetch in Server Components

await fetch(url)

Runs on server by default.

22. Static Rendering

Data fetched at build time.

Best for blogs and landing pages.

23. Dynamic Rendering

Data fetched on every request.

Used for dashboards.

24. Revalidation

next:{revalidate:60}

Refreshes data every X seconds.

25. Loading UI

loading.js

Shows loader while page loads.

26. Error UI

error.js

Handles route-level errors.

Navigation

27. useRouter

useRouter()

Programmatic navigation.

28. useParams

Reads dynamic URL params.

29. useSearchParams

Reads query string values.

Components & Architecture

30. Components Folder

components/

Reusable UI parts.

31. Pages Folder

app/

Contains route pages.

32. Services Folder

services/

API logic lives here.

33. Hooks Folder

hooks/

Custom React hooks.

34. Utils Folder

Helpers and constants.

Error Handling

35. try/catch

Used in server actions and APIs.

36. Error Boundary

Next.js automatically isolates route errors.

Authentication

37. JWT Authentication

Common approach using cookies or headers.

38. Middleware

middleware.js

Runs before routes.

Used for auth guards.

39. Protected Routes

Check auth in middleware or layout.

API Routes (Backend)

40. API Route

app/api/users/route.js

Acts like Express backend.

41. HTTP Methods

export async function GET(){}
export async function POST(){}

Supports REST APIs.

42. Request / Response

NextResponse.json()

Return JSON.

43. Connecting Database

Use Prisma, MongoDB, PostgreSQL, etc.

Handled inside API routes or server actions.

44. Server Actions

"use server"

Run backend logic directly from components.

Replaces many API routes.

Testing

45. Unit Testing

Jest.

46. E2E Testing

Playwright.

Performance

47. Code Splitting

Automatic per route.

48. Lazy Loading

dynamic()

Loads components on demand.

49. Caching

Built-in fetch caching.

Build & Deployment

50. Production Build

npm run build

Creates optimized bundle.

51. Start Production Server

npm start

52. Deployment Options

Vercel  
Docker  
Nginx  
AWS  
Cloud

Advanced Next.js

53. Server Actions

Replace REST APIs.

54. Streaming

Progressive page loading.

55. Edge Runtime

Run code closer to users.

56. ISR

Incremental Static Regeneration.

Hybrid static + dynamic.

Scroll to Top