Week 11

App Router

Data Fetching and Mutations

Migrating from React Router

Going to production

Rendering Strategies

Practice

Assignment

• Teachers

Front end Track

Week 11 Overview

Next.js is a React framework built by Vercel. It extends React with server-side rendering, built-in routing, and optimisations for images, fonts, and deployment. Where a plain React app runs entirely in the browser, Next.js can render pages on the server and send real HTML to the browser - so users see content immediately, without waiting for JavaScript to load.

In Week 6 you built a client-side portfolio with React Router and Vite. This week you migrate that app to Next.js. You'll replace React Router's config-based routing with Next.js's file system routing, convert useEffect data fetching into async Server Components, and handle form submissions with Server Functions instead of separate API calls. You'll also use special files - loading.tsx, not-found.tsx that Next.js picks up automatically to handle loading and error states.

The biggest change is understanding what runs where. In a React Router app, everything runs in the browser. In Next.js, components run on the server by default - they can fetch data directly, access environment variables, and send rendered HTML to the browser. Only the parts that need interactivity run in the browser, and those are explicitly marked with "use client". Once that model is clear, the rest of Next.js follows naturally.

Learning goals

• Build routes with the App Router - map folders to URL segments, use page.tsx to make a segment publicly accessible, layout.tsx to wrap child routes, and [param] folders for dynamic segments
• Tell Server and Client Components apart - know that components are Server Components by default, add "use client" only when a component uses state or browser APIs, and know what each type can and can't do
• Fetch data in Server Components - await data directly in an async component body without useEffect or manual loading state
• Handle mutations with Server Functions - mark a function with "use server", read form data from FormData, and call revalidatePath to refresh stale cached data
• Use Next.js special files - add loading.tsx for Suspense fallbacks, error.tsx for error boundaries, and not-found.tsx with notFound() for 404s
• Deploy to Vercel - push a Next.js project, read the build output to identify static and dynamic routes, and add environment variables in the Vercel dashboard

The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0 *https://hackyourfuture.net/*

Built with ❤️ by the HackYourFuture community · Thank you, contributors

Found a mistake or have a suggestion? Let us know in the feedback form.