Next.js is an open-source web application framework based upon Node.js, Vue.js and Babel.js. The applications are built with JavaScript and React instead of PHP. You just need to create some file, add the React/JavaScript code, deploy it and that’s it!!
Why Next.JS??
Next.js renders some very cool features that make it fast and flexible, like:
- Webpack-based dev environment which supports Hot Module Replacement (HMR)
- Static Exporting
- Intuitive Page-Based Routing System
- Server-Side Page Rendering with blocking data requirements by default
- Automatic Code-Splitting
- Built-in CSS support
- Customizable with Community Plugins, Babel and Webpack configurations
- Simple client-side routing with optimized page prefetching.
What’s New with Next.js 9??
Now, the latest version of Next.js i.e. Next.js 9 is available in the market with some advanced features like Dynamic Routing, TypeScript Support, Automatic Static Optimization, API Routes and much more. Let’s check out what’s new with Next.js 9-
1. Built-in Zero-Config TypeScript Support
With automatic TypeScript support and integrated type-checking, it has been very easy to build applications. Earlier, the user had to use the plugin @zeit/next-typescript for TypeScript Support and customize his .babelrc and enable it in next.config.js. The plugin would allow building .ts and .tsx files by Next.js.
However, the plugin couldn’t integrate type-checking nor the types were provided by Next.js core. That means a separate community package was needed to integrate TypeScript code into the existing or new codebase. Thus, built-in TypeScript support was integrated into the Next.js core to improve the process-speed.
Automated Setup
Here is the procedure to get started with TypeScript-
Rename any file or page from .js to .tsx. Now, run next dev. (With this command, the TypeScript will be detected in your project.)
Integrated Type-Checking
Next.js 9 provides you with in-built type-checking in both development and building for production. It will show you type-errors in the form of syntax or compilation errors in development.
Type-checking occurs in the background and allows the user to interact with the updated application in the browser in an instant. Also, it automatically fails the production build, if any type-error is present.
2. File System-Based Dynamic Routing
Dynamic routing enables to have separate URLs. Next.js provides route mapping solutions, driven by the pages/ directory. Next.js creates routes with basic named parameters, in the most popular pattern as path-to-regexp. Now, the page having route /post/: pid/ can now be attained by creating a file in ‘pages’ directory with name pages/post/[pid].js.
The requests like /post/1, /post/hello-next.js, etc. are automatically matched by Next.js and further rendered in the page defined in pages/post/[pid].js. The matching URL segment will then be passed to your page as a query parameter with the name defined in between square brackets ‘[]’. Net.js also supports multiple dynamic URL segments.
3. Automatic Static Optimization
It is an obvious fact that Static websites are faster and do not require server-side computation. Also, they can be streamed from CDN locations to the end-user. Though Server-Side Rendering also has its benefits, it depends upon the applications.
While a marketing page or a homepage contains static content that’s why a great catch for static optimization, on the other hand, a product dashboard where the content changes frequently can benefit from server-side rendering.
But with the introduction of Next.js 9, users will no longer have to choose between fully server rendering or static exporting. You can experience both worlds now on a per-page basis.
- In Next.js 9, a heuristic has been introduced that determines whether a page can be prerendered to static HTML or not. It is done by checking if the page has blocking data requirements while using getInitialProps.
- Further, this heuristic allows Next.js to release hybrid applications containing both statically generated as well as server-rendered pages.
- The programmatic API (app.getRequestHandler()) and built-in server of Next.js (next start) both support this build output transparently, no case of ‘Special Handling’ required.
Next.js will hydrate your application to give it full interactivity and update it if it relies on query parameters in the URL.
4. API Routes
Sometimes, you need some kind of backend while building React applications either to process data provided by the user or to retrieve data from the database.
The Next.js team wrote in a blog that-
In order to get a backend, users built their API using custom server. But they run into some issues while doing do such as Next.js does not compile custom-server code that means one cannot use import/export or TypeScript. This is why many users ended up implementing their own custom-compilation pipeline above the custom server. But again, while this solved their purpose, it had may pitfalls like if configured incorrectly, tree shaking would get disabled from the entire application. Thus, we introduced API routes in this latest version.
You can use API routes via the /pages/api/ directory. All the files inside that directory will automatically be mapped to /api/<user route>/. For example, /pages/api/posts.js will get mapped to /api/posts.
5. Improved Developer Experience
There are some amendments made to improve the developer experience. Let’s check out what are they-
Compiling Indicator
In this new version, an RFC/ ‘good first issue’ has been created to find a potential solution to the problem of indicating that compilation work is being done. In earlier cases, if you were working on styles on some subtle pages then it was hard to know immediately whether they were updated or not.
The Next.js team took this challenge as an opportunity and designed this compiling indicator to improve developer-experience. Now, whenever there will be some compilation work done by Next.js, the user will see a small triangle at the bottom right corner of the page.
Console Output
Earlier while making changes in development, Next.js used to show a compiling indicator state and overwrite the changes upon the previous changes by continuously clearing the screen. This behavior used to cause several issues and also cleared the console output from your application code such as while adding console.log to the components.
But Next.js 9 no longer clears the screen and the log output jumps less, which results in a better overall experience as the terminal window will show more relevant information and flicker less. Now, all the changes, current as well as previous, will be shown on the console.
6. More Production Optimizations
Automatic Prefetching-in-Viewport of <Link> components, thus an improvement in the responsiveness of the apps, as the navigation to new pages has become quick. By-default AMP Optimization for AMP-first and hybrid AMP pages. Dead Code Elimination by replacing typeof window with its proper value i.e. undefined or object at the time of client and server builds.
How to Use??
You can start your Next.js project just like another Node project. You just have to install the npm package for the same. Here is the simple procedure to setup Next.js in your project-
This is the direct command to start Next.js-
npx create-next-app
We can use npx here, as it comes with npm 5.2 or high
Manually, you can install it in your project with the following command-
npm install --save next react react-dom
-> Script Adding
After a successful installation of react, react-dom and Next, you need to open the project with your IDE. Now, add the following script to your package.json:
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}
Now, just run npm run dev and go to http://localhost:3000. That’s it folk!! You have successfully installed Next.js.
So far, we have React, automatic transpilation and bundling, hot module loading, routing, server-side rendering, pre-fetching, and many more goodies right here. Now, let’s create our first page-
function Home() {
return <div>Welcome to Next.js!</div>
}
export default Home
We are done here!! It’s too simple guys. So, keep coding and keep learning the new frameworks and improve your experience.
Conclusion:
Next.js is a very simple and feature-rich framework. I hope you enjoyed reading this article and learned about Next.js 9 and it’s features, as much as I did.
Here you can read Next.js 13 is Here — What’s New?
For more similar tech blogs, keep connected with us.