Guides
How to Build a Next.js Website
This walks through setting up a new Next.js project with the App Router, structuring your first routes, and getting a real page rendering — the foundation everything else in this guide series builds on.
It assumes basic familiarity with React and JavaScript, but not prior Next.js experience.
Prerequisites
- arrow_rightNode.js 18.18 or later installed
- arrow_rightBasic familiarity with React components and JSX
- arrow_rightA code editor and terminal
Step 1: Create the Project
npx create-next-app@latest my-site
cd my-site
npm run devThe CLI will ask about TypeScript, ESLint, Tailwind, and the App Router — say yes to TypeScript and the App Router unless you have a specific reason not to; both are the current recommended defaults.
Step 2: Understand the File Structure
- arrow_rightapp/layout.tsx — the root layout, wraps every page
- arrow_rightapp/page.tsx — the homepage (route: /)
- arrow_rightapp/about/page.tsx — creates the /about route
- arrow_rightpublic/ — static assets served as-is
Step 3: Build Your First Real Page
app/about/page.tsx
export default function AboutPage() {
return (
<main>
<h1>About</h1>
<p>Content goes here.</p>
</main>
);
}This is a server component by default — no 'use client' needed unless it uses state, effects, or browser-only APIs.
Common Errors
- arrow_right"Module not found" after adding a new page — check the file is named page.tsx exactly, not Page.tsx or index.tsx
- arrow_rightHooks like useState failing — the component needs 'use client' at the top of the file
- arrow_rightStyles not applying — confirm the global CSS file is imported in the root layout
Best Practices
- arrow_rightKeep components server components by default; only add 'use client' where interactivity is genuinely needed
- arrow_rightCo-locate related components in the same route folder rather than one flat components directory
- arrow_rightSet up TypeScript strict mode from the start
Frequently Asked Questions
Should I use the App Router or Pages Router for a new project?add
App Router — it's the actively developed model with the clearest long-term support and better performance characteristics for most sites.
Do I need a backend to start?add
No — Next.js can render static or server-rendered pages with no backend at all; you add API routes or a database connection only once the site actually needs dynamic data.
Where do I deploy it?add
Vercel is the simplest option for Next.js specifically; see the guide on deploying Next.js on Vercel for the walkthrough.