Yenilikler

  • Faster Builds
  • Middleware
  • React 18, Server Component
  • URL Imports
  • Bot Aware ISR Fallback, AVIF Format

Faster Builds

  • Yeni javascript compiler (SWC)
  • Daha hızlı refresh, local development ortamında 3 kat daha hızlı çalışacak.
  • 5 kat daha fazla build süresi, bu sayede büyük codebase a sahip projeler daha hızlı yayınlanabilecek.
module.exports = {
  swcMinify: true
}

Middleware

Next 12 ile birlikte kolay bir şekilde middleware kullanabileceğiz.

// pages/_middleware.js

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

React 18, Server Component

  • React.lazy
  • startTransition
  • Server Component
  • And More..

Next 12 ile birlikte, react 18 ile gelen  yeni özellikleri deneyimleyebileceğiz.

// npm install react@alpha react-dom@alpha


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

URL Imports

Url imports sayesinde cdn üzerinden paketler import ederek esnek ve farklı senaryolar için kurgulayabiliriz

module.exports = {
  experimental: {
    urlImports: ['https://cdn.skypack.dev']
  }
}
import confetti from 'https://cdn.skypack.dev/canvas-confetti'

Bot Aware ISR Fallback, AVIF Format

ISR Fallback sayesinde web crawlerlar için veriler otomatik oluşturularak crawlerları loading state sokmamış oluyoruz, AVIF formatı sayesinde webp ye kıyasla %20 daha küçük görseller kullabileceğiz

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