Quick Start

Create a new Next.js app and run the development server:

1
2
3
npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

Pages and Routing

Next.js uses a file-system-based router. Create files in the pages/ directory to define routes. Learn about dynamic routes and nested routes.

Thinking in Next.js

Understand how Next.js combines React with server-side rendering, static site generation, and API routes for full-stack apps.

Installation

Install Next.js with npm or yarn:

1
npm install next react react-dom

Setup

Recommended setup:

• Use VS Code or WebStorm
• Add TypeScript with touch tsconfig.json + dependencies
• Install ESLint and Prettier
• Enable Next.js ESLint rules

Pre-rendering and Data Fetching

Learn about static generation (SSG) and server-side rendering (SSR), and how to use getStaticProps, getServerSideProps, and getStaticPaths.

API Routes

Next.js allows you to create backend API endpoints using files in the pages/api directory.

Styling

Style your app with CSS Modules, global CSS, Tailwind CSS, or styled-components.

Image Optimization

Use the built-in <Image /> component for automatic image optimization.

Deployment

Deploy easily to Vercel, the creators of Next.js, or other platforms like Netlify or AWS.