How to Build a Website with Next.js: Step-by-Step Beginner's Guide

Why Next.js is the best choice for your first professional website

If you want to learn how to build real websites (fast, well-ranked on Google and easy to maintain), Next.js is one of the most solid paths you can take today. It's the most widely used React framework in production, and companies like Netflix, TikTok, Notion and Nike use it in parts of their products.

Out of the box, Next.js gives you what used to take weeks of tweaking: server-side rendering for SEO, automatic image optimization, folder-based routing and free one-click deployment. This very AvilaDev website is built with Next.js.

In this guide you'll walk through the whole process, from installing the project to publishing it on your own domain.

What you need before you start

• Node.js installed (current LTS version).
• A code editor like VS Code.
• Basic knowledge of HTML, CSS and JavaScript. You don't need to master React: you'll pick it up as you go.
• A free GitHub account and a free Vercel account for deployment.

Step 1: create the project

Open your terminal and run:

npx create-next-app@latest my-website

The setup wizard will ask you a few questions. For a first professional website we recommend: TypeScript yes, ESLint yes, Tailwind CSS yes, App Router yes. Then go into the folder and start the development server:

cd my-website
npm run dev

Open http://localhost:3000 and you'll see your website running.

Step 2: understand the App Router in 5 minutes

In modern Next.js, every folder inside app/ is a route, and the page.tsx file is what gets displayed there:

By default, components are Server Components: they're generated on the server and reach the browser as HTML. That's what lets Google read your content without any trouble. Only when you need interactivity (a form, a mobile menu) do you add "use client" at the top of the file.

Step 3: build the sections of a professional website

A business or portfolio website usually needs these pieces. Create each one as a component in a components/ folder:

1. Navbar with links and a mobile menu.
2. Hero with a clear headline, subheading and call-to-action button.
3. Services or features in a grid.
4. Social proof: testimonials, client logos or projects.
5. Contact with a form or a WhatsApp link.
6. Footer with legal info and social links.

With Tailwind CSS you can style them directly in the JSX with classes like text-4xl font-bold, without writing separate CSS files.

Step 4: SEO from day one

Next.js includes a very powerful Metadata API. In each page.tsx you can export a metadata object with a unique title and description. On top of that, add:

• An app/sitemap.ts file to generate your sitemap automatically.
• An app/robots.ts file to control crawling.
• The next/image component so images are served optimized and in modern formats.
• Structured data (JSON-LD) for your business.

Step 5: publish for free on Vercel

1. Push your project to a GitHub repository.
2. Go to Vercel, click "Add New Project" and import the repository.
3. Vercel detects Next.js automatically: click "Deploy."
4. In a couple of minutes you'll have a public URL. Then connect your own domain from the project settings.

From then on, every time you run git push, your website updates itself.

Common beginner mistakes

• Putting "use client" on everything and losing the SEO and performance benefits.
• Using <img> instead of next/image with huge images.
• Forgetting each page's metadata: they all end up with the same title on Google.
• Storing API keys in your code instead of in environment variables.

Learn to apply it step by step with the course

This article is the starting point. If you want to put it into practice with examples, templates and videos that show each topic in action, check out the course Your First Professional Website with Next.js.

Need a finished website without coding it yourself? At AvilaDev we build professional websites with Next.js. Request a quote.