Next.js 12 - Deepstash

Bite‑sized knowledge

to upgrade

your career

Ideas from books, articles & podcasts.

published 9 ideas

Next.js 12

nextjs.org

  • New rust compiler
  • Middleware (beta)
  • React 18 Support
  • AVIF Support
  • Bot-aware ISR Fallback
  • Native ES Mo...

STASHED IN:

3

The new Rust Compiler takes advantage of native implementation and improved on speeds, making the refresh 3x faster and the builds 5x faster. It is optimised for large projects, with improvements on performance and webpack. Also, the builds are 17x faster than using Babel and the minification is ...

STASHED IN:

3

Middleware

Middleware gives you the possibility to run code before a request is complete and based on the incoming request, you can rewrite, redirect, add headers or even stream HTML. It can be used for anything that shares logic for a set of pages, including:

    STASHED IN:

    3

    The new update comes with support for React 18, which is starting to become stable. Some new interesting features from React 18 would be Suspense, APIs like startTransition and a new streaming API for server rendering with support for React.lazy

    STASHED IN:

    3

    React Server Components allow us to render everything on the server, including the component themselves. This is completely different from SSR which you pre-generate HTML on the server. With these components, there won't be any client-side JS needed => faster rendering. 

    STASHED IN:

    3

    URL Imports

    This new Next.js version includes experimental support for importing ES Modules through URLs, no install or separate build. You just need to declare the list of allowed URLs inside the next.config.js inside the experimental field, at urlImports

    STASHED IN:

    3

    In Next.js 12, web crawlers (e.g. search bots) will automatically server-render ISR pages using fallback: true, while still serving the previous behavior of the fallback state to non-crawler User-Agents. This prevents crawlers from indexing loading states.

    STASHED IN:

    3

    Smaller images using AVIF

    The built-in Image Optimization API now supports AVIF images, enabling 20% smaller images compared to WebP.

    AVIF images can take longer to optimize compared to WebP, so this feature is opt-in using the new images.formats propert...

    STASHED IN:

    3

    • After webpack 5 was the default in Next.js 11, officially the webpack 4 was removed. 
    • target in next.config.js is no longer needed.
    • next/image now uses a s...

    STASHED IN:

    3

    0 Comments

    Discover and save more ideas by creating a

    FREE

    Deepstash account.

    Develop a

    reading habit

    , save

    time

    and create an amazing

    knowledge library

    .

    GET THE APP: