2024-10-22

【React News】緊急插播! Next.js 15 on the road ! (已Stable)

原文發表於 Medium。

【React News】緊急插播! Next.js 15 on the road ! (已經Stable了)

前端技術光速發展，Next.js 15 就要來了！

各位還記得去年這個時候，我們才在討論 Next.js 14 帶來的改變。結果一年過去，Next.js又把15版推上stable了！

我知道很多人可能才剛學會 Next.js 14，或是專案才剛升級完，現在看到新版本可能會想：「蛤！？又要學新的嗎？」別擔心，這次的更新看起來是真的有在為我們開發者著想！( 又或者是更大的坑… )

1. 錯誤提示變聰明了！

開發網站時最困擾的，不就是看到一堆看不懂的錯誤訊息嗎？有使用過Next.js 14 遇到Hydration報錯的夥伴應該最明白我在講什麼，好消息，現在15版終於可以給我們修改指引了：

// 以前看到錯誤時：  
Hydration failed because...  
（我到底要去哪裡找錯誤啊啊啊！）  
  
// Next.js 15 會直接告訴你：  
這裡出錯了喔：Page.jsx 第 23 行  
建議你可以這樣改：  
...（直接給你正確寫法）...

這樣改完程式碼就不用再到處找錯誤在哪裡了，超貼心的！

2. 開發速度變快了！

如果你覺得以前改完程式碼，瀏覽器更新太慢，那這個消息你一定會喜歡。Next終於把Turbopack作為預設套件了！Next.js 團隊告訴我們，這會讓開發模式變得超級快：

啟動開發環境快了 76.7%
改完程式碼，畫面更新快了 96.3%

這大概是什麼概念？
就是你每次改完程式碼，更新頁面畫面就快了好多，開發起來更順手了！

3. 建立新專案變簡單了

用 create-next-app 建立新專案時：

想要最簡單的網站？加個 --empty 就能得到乾淨的起始專案
預設會幫忙處理好 .env 檔案，不用擔心密碼不小心上傳（#Tag你的PM吧！他一定會喜歡！）

4. 資料讀取的變化！

Next.js 15 對於資料讀取（fetch）的處理有了重要的改變。讓我用簡單的方式說明：

// Next.js 14：  
async function getData() {  
  // 在 Server Component 中  
  // 當使用了 dynamic functions（像是 cookies()）或  
  // 設定了 dynamic = 'force-dynamic' 時，不會快取  
  // 其他情況下可能會使用快取  
  const res = await fetch('https://api.example.com/data')  
  return res.json()  
}  
  
  
// Next.js 15：  
async function getData() {  
  // 預設採用瀏覽器的標準HTTP快取策略  
  const res = await fetch('https://api.example.com/data')  
  return res.json()  
    
  // 如果需要明確指定快取策略：  
  const cachedRes = await fetch('https://api.example.com/data', {  
    cache: 'force-cache'  // 試圖使用快取  
  })  
    
  const freshRes = await fetch('https://api.example.com/data', {  
    cache: 'no-store'    // 每次都重新請求資料  
  })  
}

這邊展現出來的重要變化是：

Next.js 15 預設採用標準的 HTTP 快取機制
你可以透過 cache 選項來控制快取行為
這些變化主要影響 Server Components 中的 fetch 行為

如果你是新手，現在只要記住：

當你需要即時資料時，使用 cache: 'no-store'
當你的資料不常變動時，可以使用 cache: 'force-cache'
如果不確定，就使用預設值，讓 Next.js 依照標準 HTTP 規則處理

5. 升級超容易

Next.js 團隊這次很貼心，做了一個超好用的升級工具：

npx @next/codemod@canary upgrade latest

就像有個小幫手，自動幫你處理大部分的升級工作！

6. React 相關的好消息

Next.js 15 支援最新的 React 19
但如果你的新專案要繼續用舊版的開發方式（Pages Router），可以繼續用 React 18，在開啟新專案時，使用下面的指令進行環境設定：

npm install next@latest react@^18 react-dom@^18

所以，我們不用擔心、不用著急，可以慢慢升級，不急著改用新版。

最後，給新手的建議

跟大家分享一個今天遇到的小插曲

我有個先前認識的老前端阿智，他前幾天才剛把網站升級到 Next.js 14，結果今天就看到 Next.js 15 stable發布…這大概就是前端工程師的日常啦！不過別擔心，程式碼能正常運作才是最重要的，不用急著追新版本！（你看他前一年用13版用得多快樂！）

如果你剛開始學 Next.js：

不用急著升級，等你對目前的版本熟悉了再說
新版本的錯誤提示變好了，對學習更友善
開發速度變快，寫程式會更開心！

記住，如果你還在自學，提醒你，學寫程式最重要的是基礎概念（跟開心！！！）不用急著追趕每個新版本。先把手上的專案寫好，等你覺得需要的時候再來升級也不遲！

有時候我們會發現，舊的可能也有好處，看看JQuery至今仍然這麼高的市佔率，總不會都是開發人員懶癌發作吧…？疑…？

想聊聊你對這次更新的想法嗎？歡迎在下面留言討論！

ps.即將登場的重要活動

這週四（2024/10/24）還有 Next.js Conf 要舉行，會有更多新功能發表。想了解更多的朋友可以關注看看喔！

【React News】 緊急插播! Next.js 15 on the road ! (已經Stable了)