Mark Ku's Blog
首頁 關於我
NEXTJS 13 昇級筆記
Frontend
NEXTJS 13 昇級筆記
Mark Ku
Mark Ku
December 22, 2022
1 min

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

舊寫法

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

新的寫法

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

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

 experimental: {
       newNextLinkBehavior: false,
 },

Tags

Mark Ku

Mark Ku

Software Developer

8年以上豐富網站開發經驗,直播系統、POS系統、電子商務、平台網站、SEO、金流串接、DevOps、Infra 出身,帶過幾次團隊,目前專注於北美及德國市場電商網站開發團隊。

Expertise

前端(React)
後端(C#)
網路管理
DevOps
溝通
領導

Social Media

facebook github website

Related Posts

NEXTJS 13.3.4 昇級踩坑筆記,Server side component 時代來臨 - migrate page route to app route
NEXTJS 13.3.4 昇級踩坑筆記,Server side component 時代來臨 - migrate page route to app route
May 27, 2023
1 min

Quick Links

關於我

Social Media