Practice & Assessment
Test your understanding of Next.js Foundations and Project Setup
Multiple Choice Questions
5Which file is required inside an App Router folder to make that route publicly accessible?
What is the default rendering behavior for a component in the Next.js App Router?
You need to fetch data that must be fresh on every single request (never cached). Which fetch option is correct?
Where should navigation, fonts, and global providers be placed in a Next.js App Router project?
Which statement about layouts in the App Router is true?
Coding Challenges
1Build a Multi-Page Blog Structure
Create a Next.js App Router project with four routes: / (home listing 3 hardcoded post titles), /about (static page), /blog (fetches 5 posts from https://jsonplaceholder.typicode.com/posts using a Server Component), and /blog/[id] (fetches a single post by ID from the same API). The root layout must include a nav with links to all top-level pages. All data fetching must happen in Server Components with no useEffect. Expected output: navigating to /blog/3 shows the post with id 3. Time estimate: 20-25 minutes.
Mini Project
Next.js Developer Portfolio
Build a personal portfolio site using Next.js App Router. Requirements: root layout with persistent nav and footer; home page (Server Component) fetching your GitHub repos via https://api.github.com/users/{username}/repos and rendering the top 6 by stars; /projects page listing all repos with name, description, and star count; /about static page; dynamic /projects/[name] page fetching a single repo's details; 'use client' counter component on the home page showing visitor interaction count using useState. No database required. Deploy to Vercel free tier and submit the live URL.