Next.js -12

On October 26, 2021, Next.js released its biggest version ever: Next 12. The framework sets the bar really high for what a full Javascript framework is expected to do.

Update today by running npm i next@latest.

Faster builds with Rust compiler(replacing Babel)

Next optimized bundling and compiling with ~3x faster refresh locally and ~5x faster builds for production.

Compilation using Rust is 17x faster than Babel and enabled by default using Next.js 12, replacing transforming JavaScript and TypeScript files

Other improvements and features include:

• Further speed improvements for large codebases.
• Improved observability into performance by fast refresh timing for both client and server.
• Improvements to webpack, including optimizing Fast Refresh and making on-demand entries more reliable.

Next Middleware

Middleware functions in Nextjs are executed before rendering takes place. It gives you full flexibility in Next.js because you can run code before a request is completed.

Middleware concept is a bit complicated in Next.js but in plain words, Next.js focuses on both speed and dynamic content.

You can modify the response by rewriting, redirecting, adding headers, or even streaming HTML.

Middleware gives you complete flexibility inside Next.js.

To use Middleware in Next.js, you can create a file pages/_middleware.js. In this example, we use the standard Web API Response (MDN):

// pages/_middleware.js  

export function middleware(req, ev) {  
  return new Response('Asalam o Alaikum, world!')  
}

You can even scope middleware to sub-directories.

Middleware can be used for anything that shares logic for a set of pages, including:

• Authentication
• Bot protection
• Redirects and rewrites
• Handling unsupported browsers
• Feature flags and A/B tests
• Server-side analytics
• Advanced i18n routing requirements
• Logging

Support for React Concurrent Mode

React 18 will add features like Suspense, automatic batching of updates, APIs like startTransition, and a new streaming API for server rendering with support for React.lazy.

Server-Side Streaming

Concurrent features in React 18 include built-in support for server-side Suspense and SSR streaming support. This allows you to server-render pages using HTTP streaming.

To enable, use the experimental flag concurrentFeatures: true:

// next.config.js  
module.exports = {  
  experimental: {  
    concurrentFeatures: true  
  }  
}

React Server Components

With Server Components, there’s zero client-side JavaScript needed, making page rendering faster. This improves the user experience of your application, pairing the best parts of server-rendering with client-side interactivity.

Next.js now enables you to do data fetching at the component level. By using React Server components, we can simplify things.

Special functions like getServerSideProps or getStaticProps are no longer needed.

You can rename any Next.js page to create a Server Component and import client components directly inside your Server Components.

ES Modules Support and URL Imports

In Next.js 12, importing NPM modules that only provide CommonJS is still supported.

ES modules bring an official, standardized module system to JavaScript. This standard pushes the web ecosystem forward by enabling smaller package sizes and JavaScript bundles, ultimately leading to a better user experience.

URL Imports

Next.js 12 includes support for importing ES Modules through URLs.

URL imports allow you to use any package directly through a URL. This enables Next.js to process remote HTTP(S) resources exactly like local dependencies.

After detecting the URL, Next.js will generate a next.lock file to track remote resources. URL imports are cached locally to ensure you can still work offline.

Next.js supports both client and server URL imports. To opt-in, add the allowed URL prefixes inside next.config.js:

module.exports = {  
  experimental: {  
    urlImports: ['https://cdn.skypack.dev']  
  }  
}

Built-in Image Optimization API

Next 12 now supports AVIF images, enabling 20% smaller images compared to WebP.

AVIF images can take longer to optimize compared to WebP, so we’re making this feature opt-in using the new images.formats property in next.config.js:

module.exports = {  
  images: {  
    formats: ['image/avif', 'image/webp']  
  }  
}

Other Upgrades:

• The ESLint integration now supports single-file linting in next lint with the --file flag.
• Next.js 12 now supports setting a custom tsconfig.json path.
• next.config.mjs is now supported for writing the configuration as ES modules.
• Next.js 12 automatically traces which files are needed by each page and API route

Thank you for reading this post, I hope you enjoyed and learn something new today. Feel free to contact me through my blog if you have questions, I will be more than happy to help.

LinkedIn: linkedin.com/in/zainuleb

Github: github.com/zainuleb (Github)

Email: zainulebadd@gmail.com

Stay safe and Happy learning!