Next.js 12 - Deepstash

Bite-sized knowledge

to upgrade

your career

Ideas from books, articles & podcasts.

created 9 ideas

NEXTJS

Next.js 12

Next.js 12

nextjs.org

STASHED IN:

356 reads

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

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 ...

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:

    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

    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. 

    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

    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.

    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...

    • 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...

    6 Reactions

    Comment

    It's time to

    READ

    LIKE

    A PRO!

    Jump-start your

    reading habits

    , gather your

    knowledge

    ,

    remember what you read

    and stay ahead of the crowd!

    Takes just 5 minutes a day.


    TRY THE DEEPSTASH APP

    +2M Installs

    4.7 App Score