NEXTJS 13 昇級筆記

前言

下午將公司專案從 NEXT 12 昇到 NEXT 13，NEXT 版更真的很快，在NEXT 13 替大家帶來了

• 採用新的建置網頁的技術 Turbopack (Rust based)，提昇網站建置的效能 ( 依據官方數據，快至少3倍 )
• 簡化 next/link 撰寫方式 => 自己長 a 標籤，不需要像過去還要包個 a 標籤
• 重寫 next/image 元件 => 採用原生的瀏覽器的lazy load，safari 舊版會回到預加載，並移除 layout屬性，強制要求填寫 alt 屬性。
• NEXT Font => 載入 google 字型更容易
• 開始支援非同步的伺服器元件
• 修正一些框架上的 bug

##　實測建置效能 實測網站建置 (npm run build) ,將近快了1倍 NEXT JS 12 local build 1 分 40 秒
NEXT JS 13 local build 56 秒
昇級 NEXT JS 13，有明顯渲染頁面效能上的改善。

Next Image

載入圖片新寫法，每個image，Image 強制一定要加 alt 不然會爆錯 新版 image 範例

import Image from 'next/image';

<Image
loader={cloudflareLoader}
src={contentURL + item.Image}
width={600}
height={350}
></Image>

但因 NEXT JS 13 移除 Image 的 layout，我們很多頁面，目前用了會跑版，大多數可以參考下面的範例修正

<Image
alt=""
loader={cloudflareLoader}
src={contentURL + item.Image}
width={600}
height={350}
style={{
width: '100%',
height: 'auto',
}}
></Image>

Responsive 新寫法

<Image
alt=""
loader={cloudflareLoader}
src={contentURL + item.Image}
width={600}
height={350}
sizes="100vw"
style={{
width: '100%',
height: 'auto',
}}
></Image>

如果暫時昇級不過，仍保留舊圖片元件可以使用

 import Image from next/legacy/image

Next/Link 改寫

舊寫法

<Link href="/about">
  <a>About</a>
</Link>

新的寫法

<Link href="/about">
  About
</Link>

P.S. 修改 next config ，可維持 next 12寫法(不推薦，因為修正了連結的錯誤)

 experimental: {
       newNextLinkBehavior: false,
 },