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