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 Assignment

Migrate Your Portfolio to Next.js

In Week 6 you built a client-side portfolio with React Router and Vite and deployed it as a static app on Vercel. This assignment migrates that project to the Next.js App Router, then adds capabilities that a server-aware framework makes possible for the first time.

Task 1

Set up a new Next.js project

npx create-next-app@latest portfolio-next --yes
cd portfolio-next
npm run dev

Don't copy files in bulk yet - recreate the structure deliberately.

Recreate your routes

Map each React Router route to an app/ folder.

Add "use client" to any component that uses useState, useEffect, or event handlers. Move your shared nav/footer into app/layout.tsx.

Replace React Router imports

• Links should use Link from next/link
• Navigation uses useRouter from next/navigation
• params prop on the Server Component (or useParams() in a Client Component)

Your app should now render correctly. Test every route in the browser before moving on.

Task 2

Convert the projects page to a Server Component

• Remove useEffect, useState, and the loading state
• Make the component async and await the data directly in the component body
• No "use client" directive

If you haven’t already, move your projects data to a separat projects.ts data file

Add special files to /projects/[id]

• app/projects/[id]/loading.tsx - shown while data is fetching
• app/projects/[id]/not-found.tsx - shown for missing IDs; call notFound() from the page when the fetch returns nothing

Use Server Function in the Contact form

1. Create app/contact/actions.ts with "use server" at the top
2. The action reads FormData, validates that name and message are non-empty, and logs the submission
3. Call revalidatePath('/contact') at the end
4. The form uses <form action={sendMessage}> - no useState for field values

Add metadata

Export a metadata object from /, /projects, and /contact. Use generateMetadata for /projects/[id] so each detail page has a title that includes the project name.

Task 3

Push your Next.js project to a new GitHub repository and deploy it to Vercel. After deploying, check the build output for the static/dynamic route split.

Tips

• Migrate one route at a time. Get / working before touching /projects.
• If you get a "use client" error, read the message - it tells you exactly which component needs the directive
• Run npm run build locally before deploying to catch errors that only surface in production mode
• Refer to Migrating from React Router

Submission

Follow the Assignment submission guide to learn how to submit the assignment.

Make sure to include the vercel URL in your PR.

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.