Getting Started
Introduction
Welcome to the Next.js documentation!
What is Next.js?
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.
It also automatically configures lower-level tools like bundlers and compilers. You can instead focus on building your product and shipping quickly.
Whether you're an individual developer or part of a larger team, Next.js can help you build interactive, dynamic, and fast React applications.
How to use the docs
The docs are organized into 4 sections:
- Getting Started: Step-by-step tutorials to help you create a new application and learn the core Next.js features.
- Guides: Tutorials on specific use cases, choose what's relevant to you.
- Deep Dive: In-depth explanations on how Next.js works.
- API Reference: Detailed technical reference for every feature.
Use the sidebar to navigate through the sections, or search (Ctrl+K or Cmd+K) to quickly find a page.
App Router and Pages Router
Next.js has two different routers:
- App Router: The newer router that supports new React features like Server Components.
- Pages Router: The original router, still supported and being improved.
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 docs.
Pre-requisite knowledge
Our documentation assumes some familiarity with web development. Before getting started, it'll help if you're comfortable with:
- HTML
- CSS
- JavaScript
- React
If you're new to React or need a refresher, we recommend starting with our React Foundations course, and the Next.js Foundations course that has you building an application as you learn.
Accessibility
For the best experience when using a screen reader, we recommend using Firefox and NVDA, or Safari and VoiceOver.
Join our Community
If you have questions about anything related to Next.js, you're always welcome to ask our community on GitHub Discussions, Discord, X (Twitter), and Reddit.
Next Steps
Create your first application and learn the core Next.js features.
"The future of AI is not about replacing humans, it's about augmenting human capabilities"
What's possible with Cirkles AI
How to lazy load Client Components and libraries
Lazy loading in Next.js helps improve the initial loading performance of an application by decreasing the amount of JavaScript needed to render a route.
It allows you to defer loading of Client Components and imported libraries, and only include them in the client bundle when they're needed. For example, you might want to defer loading a modal until a user clicks to open it.
There are two ways you can implement lazy loading in Next.js:
- Using Dynamic Imports with next/dynamic
- Using React.lazy() with Suspense
By default, Server Components are automatically code split, and you can use streaming to progressively send pieces of UI from the server to the client. Lazy loading applies to Client Components.