What's New in Next JS 12

Next JS 12 has brought about a slew of exciting new features. One of the most notable is the improved performance, thanks to the new caching mechanism.

This caching mechanism allows for faster page loads and reduced latency, making it a game-changer for developers and users alike. Next JS 12 also introduces support for MongoDB, a popular NoSQL database.

With MongoDB, developers can now easily integrate their Next JS applications with a scalable and flexible database solution. This is a huge win for developers who have been waiting for this integration.

The new version also includes improved support for internationalization, making it easier to build global applications. Next JS 12 supports over 100 languages, including right-to-left languages.

Next.js 12 has brought some exciting new features to the table. Improved speed for bigger databases is now a reality, thanks to the Next.js team validating the Rust compiler against some of the largest codebases worldwide.

The current release of Next.js 12 delivers Fast Refresh timing in the console for both client and server, making it a significant improvement in performance. This means developers can now get instant feedback on their code changes.

Next.js 12 has also made improvements to Webpack, making on-demand entries more reliable and maintaining Fast Refresh. This ensures a smoother development experience for developers working with larger codebases.

Here are some key benefits of these new features:

Middleware in Next.js 12 brings a lot of flexibility to developers, allowing them to run code prior to the completion of a request.

With Middleware, you can modify requests by redirecting, rewriting, adding headers, or even streaming HTML based on the response from the user. This makes it a game-changer for features that contain logic, such as authentication, bot protection, and redirects.

Middleware is useful for a wide range of use cases, including:

To implement a middleware, create a file called _middleware.js inside the directory that contains the routes you want to intercept.

Next.js 12 has introduced the Rust Compiler to make builds and refreshes faster. This is a significant upgrade that leverages the benefits of native compilation.

The Rust Compiler is built on SWC, an open-source for the next generation of fast tooling. This combination delivers 3 times faster refresh and 5 times faster build.

Using native compilation, the new compiler offers five times faster builds and three times faster refreshes. This is especially beneficial when working with large Next.js code bases.

The Rust Compiler maintains backward compatibility, so if you're using a custom configuration for Babel in your Next.js project, you don't need to worry about compatibility issues.

With the Rust Compiler, you can also set it to apply minification, which is seven times faster than the current process. This can significantly speed up your development workflow.

With the new update of Next.js, you can now enjoy 20% smaller images, making the optimization process even easier.

This is a significant improvement compared to WebP, which was already a great option for image optimization.

Smaller images mean faster load times, and that's a win for both users and developers.

Next.js is constantly evolving to make our lives easier, and this update is a perfect example of that.

Middleware is a powerful tool in Next.js that allows developers to run code before a request is completed. It's not new, but Next.js 12 has made it possible to combine with other features, like static websites and dynamic data generation.

You can use a Middleware for various use cases, such as Redirect/Rewrite, authentication, localization, logging, and A/B testing.

Middleware uses a runtime that supports standard Web APIs, making it work well with Edge platforms like Vercel. Vercel Edge Functions are serverless functions deployed in CDNs, close to end-users, enabling faster web applications.

To implement a Middleware, create a file called _middleware.js inside the directory containing the routes you want to intercept. If you want to manage all pages, create the file in /pages/_middleware.js.

Some common use cases for Middleware include:

Middleware can also be used for server-side analytics, which can be particularly useful for understanding how users interact with your application.

Incremental Static Generation is a middle ground between server-side rendering and static site generation. In this approach, the server sends static files to the client, and Next will rerender the pages again at a set time interval, sending the newly generated files to the browser.

This approach allows for a balance between performance and reactivity. The time interval can be set to suit the needs of the application, ensuring that the page is always up-to-date.

The server will send static files to the client, but Next will rerender the pages again at the set time interval. This process enables the application to respond to changes in real-time.

Incremental Static Generation can be used to improve the performance of applications that require frequent updates. By setting a time interval, the application can be configured to respond to changes without sacrificing performance.

Next.js 12 brings a fresh wave of improvements to the table, and one of the most exciting features is its support for ES modules. This standardized and professional module system is now available in all major browsers, including Node.js.

Developers can now use ES modules from any URL without going through a separate build or installation process. This flexibility allows for a seamless user experience, as Next.js 12 executes HTTP(S) remotely just like local dependencies.

With the ability to use URL imports, developers can tap into any package straight from the URL, making it easier to work with the JavaScript ecosystem's shift from CommonJS to ES modules.

Replacing Babel with SWC is a significant upgrade in Next.js 12. This change brings full support for custom Babel configurations, so you don't have to worry about compilation compatibility.

Next.js 12 now uses the Rust-based compiler SWC in place of Babel for executing JavaScript or TypeScript. This shift provides default transformations like tree-shaking of getStaticProps, getStaticPaths, and getServerSideProps, as well as styled-jsx.

The new version automatically compiles JavaScript or TypeScript through SWC, even if your application was developed using Babel. This means you can take advantage of SWC's features without having to rewrite your code.

The compilation process in Next.js 12 remains the same as in Next.js 11, which helps to resolve compatibility issues between versions.

The new CSS parser in Next.js 12 is a game-changer for developers who use styled-jsx. It follows the old parser, but with some significant improvements.

One of the key benefits is that it now throws errors for invalid CSS during development, which can save you a lot of time and frustration.

Here are some specific features of the improved parser:

This improved parser is a major upgrade for developers who use styled-jsx in their Next.js applications.

Next.js 12 has support for ES modules, which offers a standardized and professional module system to JavaScript. This is a big deal because it enables JavaScript bundles and smaller size packages, making for a better user experience.

All major browsers, including Node.js, support ES modules, so you can use them with confidence. This means you can take advantage of the latest JavaScript ecosystem changes without worrying about compatibility issues.

With ES modules, you can import packages from any URL without having to install them via NPM or run a build process. This gives you the flexibility to use any package straight from the URL, just like local dependencies.

To use this feature, you can simply allow URL prefixes in your next.config.js file. This is a straightforward process that will open up a world of possibilities for your development workflow.

To set up a Next.js 12 project, start by running `npm run dev` or `yarn dev` in the terminal to start the server. This will make the new page you added in the Next.js 12 app render at localhost:3000/sample/.

The styles directory contains all the styles used in the application, with the globals.css file applying styles to the entire application. Next.js 12 supports css modules, which automatically handle unique class names for you.

You can change some configurations for your Next.js 12 app in the next.config.js file. Static assets like images are stored in the public folder, and you can access them directly.

To setup a project, start by running npm run dev or yarn dev in the terminal to start the server.

The Next.js 12 project has its own router out of the box, which means each file in the pages directory exports a React component that represents a route.

The folder structure mirrors the actual URLs that users will navigate to, so organize your files accordingly.

The styles directory contains all the styles used in the application, and you can put global styles in the globals.css file.

Next.js 12 supports css modules, which means you can write css for a specific file using css modules without having to think of unique class names.

The public folder is where static assets like images and other files are present.

To change some configurations for your Next.js 12 app, you can update the next.config.js file.

Start the server and navigate to localhost:3000/sample/ in your browser to see the new page rendered.

To setup static generation, start by calling the getStaticProps method at build time, which will fetch the data needed for rendering the page by making an API call or database connection.

This method runs asynchronously, allowing you to fetch data from a json file, like in the example where an API is called to get data from a json file.

Next, add an export script to your package.json file by putting "postbuild": "next export" under the scripts section, alongside "build": "next build".

Keep the development server running, and then run yarn build in another terminal to build your app and automatically run the postbuild script.

The build process will serve the data.json file that Next will use at build time, so it's essential to keep the development server running.

If the build is successful, you should see a folder called out that contains all the static html files.

Next.js 12 brings some breaking changes that you should be aware of.

If your project is developed with Webpack 4, you'll get an error now.

Next.js works with Webpack 5 for all compilations in version 11, and this support continues in Next.js 12.

Developers working with Webpack 4 need to take action to avoid unnecessary errors.

You must revise your code to work with Webpack 5 if you're using Next.js 12.