This repository is a structured, theory-driven Next.js learning library, focusing on the App Router, server/client components, routing, and TypeScript best practices — crafted for learning, revision, and interviews.
Each file is a standalone .ts or .tsx file that covers a specific topic or core concept in Next.js, explained with code + comments.
| Category | Files |
|---|---|
| ✅ Basics | routing-basics.ts, metadata.ts, layout-vs-page.ts |
| 🔁 Routing | linking-and-navigation.ts, linking-and-navigation-useRouter.ts, next-app-router.ts |
| ⚙️ Config | env-variables.ts, deploy-vercel.ts, middleware.ts |
| 🔄 Components | server-component.ts, client-component.ts |
| 🧱 Data Handling | in-memory-data.ts, in-memory-data-fully-explained.ts |
| 🔐 Auth | next-auth-setup.ts |
| 📦 Structure | project-structure-bestpractices.ts |
| 🧪 Extras | loading-error-boundaries.ts, interface-vs-type.ts, useState-useEffect.ts, api-routes.ts |
- 🧠 Deep-dive into Next.js App Router concepts
- 🛠️ Built using TypeScript for better DX
- 📚 Self-contained files for quick lookup & revision
- 💼 Excellent for interview prep and daily practice
- Next.js 13+ (App Directory)
- TypeScript
- No external dependencies – just concept-focused
.tsfiles
- Clone the repo:
git clone https://github.com/jeevan42/nextjs-practices
cd nextjs-practices- Open in VS Code or any IDE
- Browse by file name – each is documented like a mini tutorial
- ✅ All topics are App Router–specific (new Next.js architecture)
- 💬 Written with developer-friendly comments
- 🧩 Each file = single focused concept
- 🧠 Bonus: Includes useful comparisons like interface vs type, layout vs page, etc.
This repo is a personal learning + revision journal. Feel free to fork, star, or reference it in your own learning journey!