100% Free Forever
AI-Powered Learning
Industry Expert Content
Certificates & Badges
Learn At Your Own Pace

Next.js Cheat Sheet

Next.js Cheat Sheet

Next.js routing, data fetching, API routes, and deployment patterns.

2 PagesIntermediateApr 26, 2026

App Router Basics

File-based routing conventions.

text
app/page.tsx              -> /app/about/page.tsx        -> /aboutapp/blog/[slug]/page.tsx  -> /blog/:slugapp/layout.tsx            -> shared layout

Data Fetching

Fetch data in a Server Component.

tsx
export default async function Page() {  const res = await fetch('https://api.example.com/data', {    next: { revalidate: 60 }, // ISR every 60s  });  const data = await res.json();  return <div>{data.title}</div>;}

Route Handler

Build an API endpoint.

ts
// app/api/hello/route.tsexport async function GET() {  return Response.json({ message: 'Hello' });}

Special Files

Reserved file names in the app directory.

  • page.tsx- Route UI
  • layout.tsx- Shared UI wrapper
  • loading.tsx- Loading state
  • error.tsx- Error boundary
  • not-found.tsx- 404 UI
Pro Tip

Keep Server Components as the default and only add "use client" to components that truly need interactivity or browser APIs.

Was this cheat sheet helpful?

Explore Topics

#NextJs#NextJsCheatSheet#WebDevelopment#Intermediate#AppRouterBasics#DataFetching#RouteHandler#SpecialFiles#APIs#DevOps#CheatSheet#SkillVeris
Advertisement
Sri Hayavadhana Info-Tech

Professional Web Designing Services

  • Responsive Websites
  • E-commerce Solutions
  • SEO Friendly Design
  • Fast & Secure
  • Support & Maintenance
Get a Free Quote

Share this Cheat Sheet