The main features of NextJS. Look at that 👇
- Server-Side Rendering
You can render React components on the server-side, before sending the HTML to the client.
- Automatic Routing (Create Dynamic Pages)
Any URL is mapped to the filesystem, to files put in the
pages folder, and you don't need any configuration (you have customization options of course).
- Single File Components
styled-jsx, completely integrated as built by the same team, it's trivial to add styles scoped to the component.
- Ecosystem Compatibility
- Automatic Code Splitting
Next.js does that by analyzing the resources imported.
Link component, used to link together different pages, supports a
prefetch prop which automatically prefetches page resources (including code missing due to code splitting) in the background.
- Static Exports
Static exports: with the
next export you can export a fully static site from your application.
- TypeScript Support
Next.js is written in TypeScript and as such comes with excellent TypeScript support :)
- AMP pages
Yes! Next.js supports hybrid and AMP only pages (make sure you are using Next.js 8.1 or newer)
NextJS vs React
NextJS is the React framework. React is a library for building user interfaces. NextJS uses React, a framework for server-rendered React applications.
What NextJS does is it renders React apps on the server (SSR).
Two can’t really be compared, because NextJS wraps React, and they basically work together.
It provides a common structure that allows you to easily build a frontend React application and transparently handles server-side rendering for you.
How to install Next.js?
We can choose 2 routes now: using
create-next-app or the classic approach which involves installing and setting up the NextJS app manually.
If you’re familiar with
create-next-app is the same thing - except it creates a Next app instead of a React app.
The command asks for the app name, then creates a new folder for you, then downloads all the packages it needs (react, react-dom, next), as usual installs package.json.
and you can immediately run the sample app by running
npm run dev
This is the recommended way to start a Next.js application, as it gives you structure and sample code to play with.
There’s more than just that default sample application.
Also, you can use any of the examples stored at https://github.com/zeit/next.js/tree/canary/examples using the
The SSR really works
If we create a site using Next.js, the site pages are rendered on the server, which delivers HTML to the browser.
Let’s make sure.
Just view the source of the app. Using Chrome you can right-click anywhere on the page, and press View Page Source.
We don’t need to set up anything, server-side rendering is already working for us. No configuration unless it’s needed. Automatic hot-code reloading, error reporting, source maps, transpilation for older browsers.
Every route within Next.js is simply an ES6 module that exports a function or class that extends from
The advantage of this approach over similar models is that your entire system remains highly composable and testable.
For example, a component can be rendered directly, or be imported and rendered by another top-level component.
We’ve also made the decision to embrace CSS-in-JS.
Automatic server rendering and code splitting
Two tasks are most desirable:
- Server-Side Rendering
- Splitting your app’s build into smaller bundles
With Next.js, every component inside
pages/ gets server-rendered automatically and their scripts inlined.
When a component is loaded dynamically through
<Link prefetch /> or the router, we fetch a JSON based representation of the page which likewise contains its scripts.
This means that a certain page could have an extensive list of imports.
Data fetching is up to the developer
Server-rendering of static JSX is an important achievement, but real-world applications deal with dynamic data coming from different API calls and network requests.
Next.js makes a very important extension to the React’s Component contract:
A page that fetches some data would look as follows
As you can see, the contract is very simple and unopinionated:
getInitialProps must return a
This makes Next.js play well with REST APIs, GraphQL and even global-state management libraries Redux.
All it takes to deploy a Next.js app is to run
next build followed by
In my opinion, it strikes a good balance between flexibility and smart defaults, but it’s certainly not a solution to every problem.