BLOG — DEVELOPMENT
Next.js is the most popular React framework for production websites. In this guide, we take you step by step — from the first command to a live website.
React is great for interactive interfaces, but for a full website you're missing a few things: routing, server-side rendering, and optimization. Next.js adds all of that without you having to set up a build pipeline yourself.
Compared to alternatives like Nuxt (Vue) or Astro, Next.js offers the largest community, the most integrations, and the best developer experience for React teams. It's maintained by Vercel and used by companies like Nike, TikTok, and Notion.
| Feature | Next.js | Nuxt | Astro |
|---|---|---|---|
| Language | React/TypeScript | Vue/TypeScript | Any framework |
| SSR/SSG | Both | Both | SSG (SSR opt-in) |
| Community | Very large | Large | Growing |
| Learning curve | Medium | Medium | Low |
Starting a new Next.js project is one command:
npx create-next-app@latest my-website --typescript --tailwind --app --src-dirThis gives you a working project with TypeScript, Tailwind CSS, the App Router, and a clean src/ directory structure. The key files:
src/
app/
layout.tsx → Root layout (HTML, fonts, metadata)
page.tsx → Homepage
globals.css → Tailwind imports + custom styles
public/ → Static files (images, favicon)Start the development server with npm run dev and open http://localhost:3000. You have a working website.
Next.js uses file-based routing. Every folder in app/ with a page.tsx automatically becomes a route:
app/
page.tsx → /
about/
page.tsx → /about
blog/
[slug]/
page.tsx → /blog/my-article (dynamic)Dynamic routes are used for content from a database or API. The [slug] folder catches any value — /blog/first-post, /blog/second-post, and so on.
Layouts share UI between pages. A layout.tsx in the root applies to all pages. A layout in app/blog/ applies only to blog pages. Perfect for navigation or a sidebar.
Tailwind CSS is the most popular choice for Next.js projects, and for good reason: it's fast, scalable, and works seamlessly with React components.
Another advantage: Tailwind's utility classes work well with server components because you don't need runtime CSS-in-JS. This matters for performance.
export default function Hero() {
return (
<section className="py-20 bg-gray-50">
<div className="max-w-4xl mx-auto px-6">
<h1 className="text-5xl font-bold text-gray-900">
Welcome to my website
</h1>
<p className="mt-4 text-xl text-gray-600">
Built with Next.js and Tailwind CSS.
</p>
</div>
</section>
)
}For icons we use lucide-react — lightweight, tree-shakeable SVG icons. For animations, framer-motion is the standard.
The fastest way to go live is Vercel — the platform from the creators of Next.js. Push your code to GitHub, connect it to Vercel, and every push deploys automatically.
Want more control? You can also run Next.js on your own server with next start, or as a Docker container. For static sites, next export works with any hosting (Netlify, Cloudflare Pages, etc.).
Push your project to GitHub
Create an account on vercel.com and import your repo
Vercel detects Next.js automatically — click Deploy
Vercel offers free hosting for hobby projects. For production, plans start at $20/month, including analytics, edge functions, and custom domains.
Yes, Next.js is fully open-source and free to use. You only pay for hosting. Vercel has a free tier, but you can also self-host.
Not necessarily. Next.js has built-in API Routes and Server Actions that let you write server logic without a separate backend. For complex applications, you can connect it to a headless CMS, database, or external API.
Absolutely. Combine Next.js with Shopify (headless), Stripe, or Mollie for payments. You get a blazing-fast store with full control over the design. We build these kinds of solutions regularly.
Building it yourself isn't your thing? We create professional Next.js websites for businesses that want to be fast, scalable, and easy to find.
View our web development services