Docs | Next.js
Skip to content
Search documentation...
Search... ⌘K Showcase Docs Blog Analytics Templates Enterprise Feedback Learn Menu
Using App Router
Features available in /app
Getting Started
Installation
Project Structure
Building Your Application
Routing
Defining Routes
Pages
Layouts and Templates
Linking and Navigating
Error Handling
Loading UI and Streaming
Redirecting
Route Groups
Project Organization
Dynamic Routes
Parallel Routes
Intercepting Routes
Route Handlers
Middleware
Internationalization
Data Fetching
Fetching, Caching, and Revalidating
Server Actions and Mutations
Data Fetching Patterns and Best Practices
Rendering
Server Components
Client Components
Composition Patterns
Runtimes
Caching
Styling
CSS Modules
Tailwind CSS
CSS-in-JS
Sass
Optimizing
Images
Videos
Fonts
Metadata
Scripts
Bundle Analyzer
Lazy Loading
Instrumentation
OpenTelemetry
Static Assets
Third Party Libraries
Memory Usage
Configuring
TypeScript
ESLint
Environment Variables
Absolute Imports and Module Path Aliases
MDX
src Directory
Draft Mode
Content Security Policy
Testing
Vitest
Jest
Playwright
Cypress
Authentication
Deploying
Production Checklist
Static Exports
Upgrading
Codemods
App Router Migration
Version 14
Migrating from Vite
Migrating from Create React App
API Reference
Components
Font
<Image>
<Link>
<Script>
File Conventions
default.js
error.js
instrumentation.js
layout.js
loading.js
mdx-components.js
middleware.js
not-found.js
page.js
route.js
Route Segment Config
template.js
Metadata Files
favicon, icon, and apple-icon
manifest.json
opengraph-image and twitter-image
robots.txt
sitemap.xml
Functions
cookies
draftMode
fetch
generateImageMetadata
generateMetadata
generateSitemaps
generateStaticParams
generateViewport
headers
ImageResponse
NextRequest
NextResponse
notFound
permanentRedirect
redirect
revalidatePath
revalidateTag
unstable_cache
unstable_noStore
useParams
usePathname
useReportWebVitals
useRouter
useSearchParams
useSelectedLayoutSegment
useSelectedLayoutSegments
userAgent
next.config.js Options
appDir
assetPrefix
basePath
compress
crossOrigin
devIndicators
distDir
env
eslint
exportPathMap
generateBuildId
generateEtags
httpAgentOptions
images
cacheHandler
instrumentationHook
logging
mdxRs
onDemandEntries
optimizePackageImports
output
pageExtensions
Partial Prerendering (experimental)
poweredByHeader
productionBrowserSourceMaps
reactStrictMode
redirects
rewrites
serverActions
serverComponentsExternalPackages
StaleTimes (experimental)
trailingSlash
transpilePackages
turbo
typedRoutes
typescript
urlImports
webpack
webVitalsAttribution
create-next-app
Edge Runtime
Next.js CLI
Pages and Layouts
Custom App
Custom Document
API Routes
Custom Errors
Server-side Rendering (SSR)
Static Site Generation (SSG)
Automatic Static Optimization
Client-side Rendering (CSR)
Edge and Node.js Runtimes
getStaticProps
getStaticPaths
Forms and Mutations
getServerSideProps
Incremental Static Regeneration (ISR)
Client-side Fetching
AMP
Babel
PostCSS
Custom Server
Debugging
Preview Mode
Multi Zones
Continuous Integration (CI) Build Caching
From Pages to App
Version 13
Version 12
Version 11
Version 10
Version 9
<Head>
<Image> (Legacy)
getInitialProps
useAmp
Runtime Config
Architecture
Accessibility
Fast Refresh
Next.js Compiler
Supported Browsers
Turbopack
Community
Contribution Guide
On this page
What is Next.js?
Main Features
How to Use These Docs
App Router vs Pages Router
Pre-Requisite Knowledge
Join our Community
Edit this page on GitHub
Managed Next.js (Vercel)
Scroll to top
Introduction
Welcome to the Next.js documentation!
Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.
Under the hood, Next.js also abstracts and automatically configures tooling needed for React, like bundling, compiling, and more. This allows you to focus on building your application instead of spending time with configuration.
Whether you're an individual developer or part of a larger team, Next.js can help you build interactive, dynamic, and fast React applications.
Some of the main Next.js features include:
Feature
Description
A file-system based router built on top of Server Components that supports layouts, nested routing, loading states, error handling, and more.
Client-side and Server-side Rendering with Client and Server Components. Further optimized with Static and Dynamic Rendering on the server with Next.js. Streaming on Edge and Node.js runtimes.
Simplified data fetching with async/await in Server Components, and an extended
API for request memoization, data caching and revalidation.
Support for your preferred styling methods, including CSS Modules, Tailwind CSS, and CSS-in-JS
Optimizations
Image, Fonts, and Script Optimizations to improve your application's Core Web Vitals and User Experience.
Improved support for TypeScript, with better type checking and more efficient compilation, as well as custom TypeScript Plugin and type checker.
On the left side of the screen, you'll find the docs navbar. The pages of the docs are organized sequentially, from basic to advanced, so you can follow them step-by-step when building your application. However, you can read them in any order or skip to the pages that apply to your use case.
On the right side of the screen, you'll see a table of contents that makes it easier to navigate between sections of a page. If you need to quickly find a page, you can use the search bar at the top, or the search shortcut (
Ctrl+K
or
Cmd+K
).
To get started, checkout the
guide.
Next.js has two different routers: the App Router and the Pages Router. The App Router is a newer router that allows you to use React's latest features, such as Server Components and Streaming. The Pages Router is the original Next.js router, which allowed you to build server-rendered React applications and continues to be supported for older Next.js applications.
At the top of the sidebar, you'll notice a dropdown menu that allows you to switch between the
App Router
and the
Pages Router
features. Since there are features that are unique to each directory, it's important to keep track of which tab is selected.
The breadcrumbs at the top of the page will also indicate whether you're viewing App Router docs or Pages Router docs.
Although our docs are designed to be beginner-friendly, we need to establish a baseline so that the docs can stay focused on Next.js functionality. We'll make sure to provide links to relevant documentation whenever we introduce a new concept.
To get the most out of our docs, it's recommended that you have a basic understanding of HTML, CSS, and React. If you need to brush up on your React skills, check out our
React Foundations Course
, which will introduce you to the fundamentals. Then, learn more about Next.js by
building a dashboard application
For optimal accessibility when using a screen reader while reading the docs, we recommend using Firefox and NVDA, or Safari and VoiceOver.
If you have questions about anything related to Next.js, you're always welcome to ask our community on
GitHub Discussions
Discord
Twitter
, and
Reddit
Learn how to create full-stack web applications with Next.js.
Use the new App Router with Next.js' and React's latest features, including Layouts, Server Components, Suspense, and more.
Before Next.js 13, the Pages Router was the main way to create routes in Next.js with an intuitive file-system router.
How Next.js Works
Get involved in the Next.js community.
Next
Was this helpful?
supported.
Send
Resources
Next.js Conf
DX Platform
More
Next.js Commerce
Contact Sales
GitHub
Releases
Telemetry
Governance
About Vercel
Next.js + Vercel
Open Source Software
Legal
Privacy Policy
Cookie Preferences
Subscribe to our newsletter
Stay updated on new releases and features, guides, and case studies.
Subscribe
2024
Vercel, Inc.