Practice Exercises & Next Steps

Beginner

1. Create a new Next.js app with create-next-app and add three routes: /, /about, /contact.
2. Build a nested layout: a /dashboard section with its own sidebar layout, containing /dashboard/profile and /dashboard/settings pages.
3. Create a dynamic route /products/[id] that displays the id from the URL.
4. Add a shared Navbar in the root layout using next/link for all navigation.
5. Add metadata (title + description) to three different pages.

Intermediate

6. Build a /students page that fetches a list from a public API (e.g. https://jsonplaceholder.typicode.com/users) inside a Server Component.
7. Add a search page at /search that reads a q search param and filters results server-side.
8. Build a "contact us" form using a Server Action that validates the email field and shows an error via useActionState.
9. Create a Route Handler at /api/students supporting GET (list) and POST (create).
10. Add next/image to a gallery page and compare load behavior with a plain <img> tag using browser DevTools' Network tab.

Advanced

11. Add middleware that redirects unauthenticated visitors away from a /dashboard route group.
12. Convert a data-heavy page to use "use cache" with a cacheLife profile, and add a Server Action that calls revalidateTag after a mutation.
13. Build a product page that combines a static shell with a <Suspense>-streamed personalized section (Partial Prerendering / Cache Components in practice).
14. Add generateMetadata to a dynamic blog route so each post has a unique title and Open Graph image.
15. Set up a CI check that runs next build and fails if any route unexpectedly becomes fully dynamic when it was meant to be static.
16. Deploy the finished app (Vercel, or another host using the Adapter API) and verify caching headers with browser DevTools.

Compare each exercise's Server vs Client Component boundaries as you build — that decision affects nearly everything else in a Next.js app.

Learning roadmap

Stage	Focus
Weeks 1–2	Project setup, file-based routing, layouts, next/link navigation
Weeks 3–4	Server vs Client Components, data fetching, basic caching
Weeks 5–6	Server Actions, forms, Route Handlers, middleware
Weeks 7–8	Rendering strategies (SSR/SSG/ISR/PPR), SEO, image/font optimization
Ongoing	Cache Components, Turbopack tuning, an auth provider, deployment & monitoring

Common interview questions

• What problem does the App Router's file-based routing solve compared to manually configuring a router?
• Explain the difference between a Server Component and a Client Component, and when you'd need 'use client'.
• What are the four core rendering strategies in Next.js, and how would you choose between them for a given page?
• How does revalidateTag differ from revalidatePath?
• What is a Server Action, and how is it different from a traditional API route?
• Why does Next.js recommend next/image and next/font instead of plain <img> tags and <link> font imports?
• What does middleware run on, and why can't it use most Node.js-only packages?
• Explain what Cache Components changed about the App Router's caching model, and why.
• What's the difference between NEXT_PUBLIC_ and regular environment variables?
• What is Partial Prerendering, and what problem does it solve that plain SSG/SSR couldn't?

Where to go next

Read the official documentation at nextjs.org/docs, which is kept in sync with each release. Then build one complete project — a blog with dynamic routes and SEO metadata, or a small SaaS dashboard with authentication and a database — rather than only isolated exercises. Pushing a real app through next build and deploying it is what surfaces the caching, rendering, and data-fetching decisions that tutorials alone don't teach.