Skillnaija All courses →

Build and deploy a multi-page, data-driven Next.js site to Vercel

The capstone project for Next.js for Modern Websites — a free Data & Tech course. Pass it and you earn a certificate anyone can verify.

Start the course free Download the project workbook

The project unlocks once you complete the lessons. The workbook is free to download now so you can see exactly what is expected.

What you will submit

Two clearly-labelled links submitted together: (1) the LIVE Vercel URL of your deployed site, and (2) the public GitHub REPO URL of its code. The live site must have at least 3 routed pages sharing a layout with nav + footer, at least two reusable prop-driven components (one rendered as a .map() list), at least one data-driven page fetched in a server component, responsive Tailwind styling, and SEO metadata on the home page.

What to do, step by step

  1. Create a new Next.js App Router project with create-next-app (Tailwind on, src/ on) and build a site with AT LEAST 3 pages using file-based routing — for example a home page, an about page, and one more — all sharing a root layout.tsx that contains a nav bar (using next/link) and a footer that appear on every page.
  2. Build and use at least TWO of your own reusable components in a src/components folder that accept props (e.g. a Card, a Button, a Header), and render at least one of them as a LIST using .map() over an array with a unique key on each item.
  3. Include at least ONE data-driven page that fetches data in an async server component — either from a free public API (e.g. a products, jobs, posts or quotes API) or from your own local data file/array — and renders the results; if it needs interactivity (a search box, a counter, a menu toggle), add a SMALL client component marked with 'use client' and keep the rest server-rendered.
  4. Style the whole site with Tailwind so it looks clean and is RESPONSIVE (looks right on a phone and on a laptop — use md:/lg: prefixes and test by resizing your browser), and add SEO metadata (a unique title and description) to at least the home page.
  5. Push the project to a public GitHub repository (make sure node_modules and .env.local are git-ignored), then deploy it free to Vercel and confirm the live URL loads and every page and link works.
  6. Submit BOTH links together: your live Vercel URL and your public GitHub repository URL — paste them clearly labelled, e.g. 'Live: https://...vercel.app' and 'Repo: https://github.com/...'.

Files to work with

Project workbook (fill in, then submit)The whole brief, an evidence checklist, the grading rubric as a self-check and the link-sharing steps in one file. Opens in Word, Google Docs or WPS.Word · 7 KB

How it is graded

CriterionWeight
Routing & layout — at least 3 working pages via file-based routing, all sharing a root layout with a nav (next/link) and footer that appear on every page; all links work on the live site25%
Reusable components & props — at least two custom components that take props, with at least one rendered as a .map() list using a unique key20%
Data-driven page & server/client split — at least one page fetches and renders data in an async server component, with any interactive piece correctly isolated as a small 'use client' component25%
Styling, responsiveness & SEO — clean Tailwind styling that works on phone and laptop, plus SEO metadata (title + description) on the home page15%
Deployment & repo — site is live on Vercel and loads correctly, code is in a public GitHub repo with node_modules/.env.local ignored, and both links are submitted and working15%

You need 65% overall to pass. A failed submission comes back with feedback and can be revised and resubmitted.

Before you submit: make your link public

If your work lives in Google Drive or Google Docs, open Share → General access and change “Restricted” to “Anyone with the link” (Viewer). Then paste the link into a private browser window: if it opens without sign-in, you are ready. A private link cannot be graded — it is the single most common reason a good project fails.

Frequently asked questions

Do I have to finish Next.js for Modern Websites before submitting the project?

Yes. The submission screen opens once every lesson in Next.js for Modern Websites is marked complete. The lessons are where the methods, the Nigerian context and the worked examples the project depends on are taught.

How is the project graded?

An examiner scores each rubric criterion from 0 to 100 and weights them as shown on this page; you need 65% overall to pass. Most submissions are graded within minutes and you get written feedback on what was strong and what to improve.

Can I resubmit if I fail?

Yes. A failed project comes back with feedback; revise the weak parts and resubmit. A passed project is final — the certificate is issued and cannot be re-rolled.

What do I actually submit?

A write-up of what you did (under 5,000 characters) plus a public link to your work — a Google Drive folder, Google Doc, spreadsheet, GitHub repository or video. The link must open without sign-in; a private link cannot be graded. The free project workbook on this page walks you through all 6 steps.

Is the certificate real?

Yes. Passing this project issues a certificate with a unique verification code. Anyone — an employer, a client, a school — can open the verification page and see that the certificate is genuine and which project earned it.

More Data & Tech projects

Ready to earn this certificate?

Next.js for Modern Websites is free and self-paced. Finish the lessons, complete this project, and the certificate is yours to share.

Start learning free