What Is Next.js and Why Use It

Next.js is a React framework created by Vercel that enables you to build full-stack web applications. Unlike a plain React app that runs entirely in the browser, Next.js lets you render components on the server, generate static HTML at build time, and serve API endpoints — all within a single project. This makes it an excellent choice for production applications that need fast initial page loads, good SEO, and a streamlined developer experience. Next.js 14 introduced the stable App Router, built on top of React's server component architecture. The App Router replaces the older Pages Router as the recommended approach for new projects. It uses a file-system-based routing convention inside the app/ directory, where folders define URL segments and special files like page.tsx, layout.tsx, and loading.tsx define the UI for each route. The framework integrates seamlessly with Vercel for deployment, but can also be self-hosted on any Node.js server or exported as a static site. Next.js handles many performance optimisations automatically: image optimisation via next/image, font optimisation via next/font, and automatic code-splitting so only the JavaScript needed for each page is sent to the browser.

Example

# Create a new Next.js 14 project using the official CLI
npx create-next-app@latest my-next-app

# Prompts you will see:
# Would you like to use TypeScript? › Yes
# Would you like to use ESLint? › Yes
# Would you like to use Tailwind CSS? › Yes
# Would you like to use the `src/` directory? › No
# Would you like to use App Router? › Yes
# Would you like to customize the default import alias? › No

# Move into the project directory
cd my-next-app

# Start the development server with hot-reload
npm run dev
# => ready on http://localhost:3000

# Build for production
npm run build

# Start the production server
npm run start

# Key files created by create-next-app:
# app/layout.tsx   - root layout (wraps every page)
# app/page.tsx     - home page at /
# app/globals.css  - global styles
# next.config.js   - Next.js configuration
# tsconfig.json    - TypeScript configuration
# tailwind.config.ts - Tailwind configuration

HTML

Full Editor

Related Resources

Next.js Reference

Complete tag & property list

Next.js How-To Guides

Step-by-step practical guides

Next.js Exercises

Practice what you've learned