Why Next.js
Next.js is JavaScript framework that helps you build web applications using React.js.
When building an app from scratch with React, you have so many decisions to make and so many choices. Next.js has well-thought-out conventions baked in that make these decisions for you. So in that way, it's very opinionated. It's the conventions that are the secret sauce, though. These opinions come from years of experience building production-ready React apps.
Here are some of the highlights that you get for free:
Dev build system
Production build system
Prerendering
SSR
Build time
Static
Routing
API routes
By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript. Pre-rendering can result in better performance and SEO.
Each page only loads the JavaScript that is needed on that specific page.
When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive.
If your app is a plain React.js app (without Next.js), there’s no pre-rendering (you won’t be able to see the app if you disable JavaScript).
This will install a boilerplate app and all of its dependencies. The project's package.json
will have all the needed scripts ready for you as well.
We can set up a Next.js app from scratch:
Next.js with examples Github page.
The Good Parts
Ecosystem + Examples
Next.js is a full-stack framework, by default, it needs to be hosted on a platform that supports Node.js
Next.js leverages existing powerful tools like Webpack, Babel, and Uglify, presented to the end-user as a remarkable simple interface: next
(to develop), next build
(to prepare for production) and next start
(to serve) or next export
to pre-render to static files. For example, you can extend the Next.js webpack configuration by setting up a webpack
property in your next.config.js
.
Next Plugins - the community repository for recipes that automatically expand the functionality of Next.js without having to tweak specific knobs.
You can compose multiple applications built with Next.js (Zones). For example, mydomain.com/settings
and mydomain.com/
could be two entirely different apps, deployed independently, scaled independently, even running different versions of the same software.
Next.js adds a built-in <Image>
component to be used as a drop-in replacement for the HTML <img>
element. Developed in collaboration with the Google Chrome team, the Image
component seeks to improve page performance by implementing best practices: lazy loading, layout placeholders, ratio-based image responsiveness, and image format optimization.
Last updated