前言
下午將公司專案從 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,
},
留言