Next.js Machine Coding

These challenges test your understanding of Server Components, Data Fetching, and the App Router.

1. Infinite Scroll Feed

Build a feed of items that loads more as the user scrolls to the bottom.

• Focus: Server Actions, useOptimistic (Advanced), and scroll events.

2. Dynamic Dashboard with Suspense

Build a dashboard with several independent sections. Each section should fetch its own data. Use React Suspense to show loading states for each part independently.

• Focus: Suspense, loading.tsx, and parallel data fetching.

3. SEO-Optimized Blog with Dynamic Routes

Create a blog where each post is based on its ID. Use generateMetadata for Dynamic SEO.

• Focus: generateMetadata, params, Static Site Generation.

4. Auth-Protected Protected Layout

Create a sidebar that is only visible when the user is "logged in". Wrap several routes in an (auth) group.

• Focus: Route groups, Middleware, and layout.tsx protection.

---

Next Step: Ace your Interview Q's.