Next.js is an open-source web development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites.
React documentation mentions Next.js among “Recommended Toolchains” advising it to developers as a solution when “Building a server-rendered website with Node.js”. Where traditional React apps can only render their content in the client-side browser, Next.js extends this functionality to include applications rendered on the server-side.
Features of Next.js
The main feature of Next.js is its use of server-side rendering to reduce the burden on web browsers and provide enhanced security. This can be done for any part of the application or the entire project, allowing for content-rich pages to be singled out for server-side rendering It can also be done only for first time visitors, to reduce the burden on web browsers that have yet to download any of the site’s assets The “hot reloading” feature detects changes as they are made and re-renders the appropriate pages so the server avoids the need to be restarted.
This allows changes made to the application code to be immediately reflected in the web browser, though some browsers will require the page to be refreshed The software uses page-based routing for developer convenience and includes support for dynamic routing.
- A built-in router (no need to install React Router)
- API routes (write backend code using Node.js in /pages/api)
- Super fast builds for development / production (see saved changes instantly)
- Image and font optimization
- Built-in ESLint and TypeScript support
How to Create a Next.js App
If you have NPM installed, start any new Next project with the command:
npx create-next-app my-next-project
create-next-app is a package like Create React App, but for Next.js projects.
In short, it gives us a Next project with all its dependencies installed (which are
react-dom) plus some dummy pages and styles.