---
name: set-up-nextjs-tailwind-site
description: Sets up a new Next.js App Router project with Tailwind, a shared layout, header, footer, 404 page and one route per page in your website brief, then pushes it to GitHub. Use when the user wants to start a new website, create a Next.js site, or turn a page list into a working project.
license: CC-BY-4.0
metadata:
  category: frontend
  tags: "nextjs,tailwind,typescript"
  author: johnny-bravo
  version: "1.0"
  updated: "2026-10-31"
  status: published
---

# Set up a Next.js and Tailwind website

## When to use
- Starting a small-business or marketing website from nothing.
- You have a page list (ideally `docs/website-brief.md` from the Website mode of `write-prd-prompt`) and want a project that runs locally with every page in place.
- Not for adding pages to an existing site; just add the route folders.

## Handoff
- Reads: `docs/website-brief.md` (page list, business name, contact details). If it is missing, ask for the page list and business name instead of guessing.
- Writes: a project that runs with `npm run dev`, pushed to a GitHub repository. Record the repo URL and how to run it in `README.md`.

## Steps
1. Check Node.js is installed (`node -v`; use the current LTS). Create the project with the recommended defaults (TypeScript, ESLint, Tailwind CSS, App Router, no `src/` folder):
   ```bash
   npx create-next-app@latest my-site --yes
   cd my-site
   ```
2. Copy the brief into the project as `docs/website-brief.md` so later steps can read it.
3. Shared layout in `app/layout.tsx`: set `<html lang="en">` (or `en-AU`), a skip link (`<a href="#main" className="sr-only focus:not-sr-only">Skip to content</a>`), `<Header />`, `<main id="main">{children}</main>`, `<Footer />`.
4. `components/site/Header.tsx`: business name or logo linking to `/`, a `<nav aria-label="Main">` with one link per page from the brief, and the main call to action as a button-styled link (usually to `/contact`). On small screens use a `<details>`/`<summary>` menu or a button with `aria-expanded`.
5. `components/site/Footer.tsx`: business name, contact details from the brief, links to `/privacy` and `/contact`, and the current year.
6. One route per page in the brief: `app/about/page.tsx`, `app/services/page.tsx`, `app/contact/page.tsx`, `app/privacy/page.tsx`. Each gets an `<h1>` and the draft copy from the brief, so nothing is blank. Keep `app/page.tsx` simple: the home page is designed in a later step.
7. `app/not-found.tsx`: a friendly 404 with a link home and to `/contact`.
8. Keep page data in one place: `lib/site.ts` exporting `site = { name, url, email, phone, address, nav: [...] }`. The header, footer, SEO and contact steps all read from it.
9. Run `npm run dev`, click every nav link, then `npm run build` and fix any error before moving on.
10. Put it on GitHub: create an empty repository, then `git add -A && git commit -m "Initial site" && git branch -M main && git remote add origin <repo-url> && git push -u origin main`. Write the repo URL and "npm install, npm run dev" in `README.md`.

## Gotchas
- Never commit `.env.local` or API keys. `create-next-app` already lists `.env*` in `.gitignore`; keep it.
- Use `next/link` for internal links and `next/image` for images (with `alt` text), not raw `<a>`/`<img>`.
- Tailwind v4 is configured in CSS (`@import "tailwindcss";` in `app/globals.css`), not in `tailwind.config.js`. Theme colours come in the next step.
- Don't add a CMS, auth or database yet. A small-business site needs none of them to launch.
- Names: folder names become URLs. Use lowercase kebab-case (`app/our-work/`), not `app/OurWork/`.

## Example prompt
"Here's my website brief. Create the Next.js project with every page in it, a header and footer, and push it to my GitHub."