2023-10-27

【React News】Next.js 14!!?

原文發表於 Medium。

驚天地泣鬼神！Next.js 13 都還沒學透，現在Next.js 14要出來了！？

驚天地泣鬼神！Next.js 13 都還沒學透，現在Next.js 14要出來了！？

在今年，我一直苦於習慣next.js 13帶來的變革（app route，就是在說你）。首先是文件命名方式的改變，在next 13之前，區分router的方式就是使用資料夾，在資料夾內加入index.jsx作為url的預設頁面，然後其他的jsx檔就依照檔案名成，作為子網域中的頁面，非常好理解。

pages route的資料架構

然而在app route中，雖然同樣依靠資料夾作為route的方式，但是主頁的名稱改為page.jsx。其他還有：

layout.js
- template.js
- error.js (React error boundary)
- loading.js (React suspense boundary)
- not-found.js (React error boundary)

等不同的jsx檔案，各有不同的功能，因此jsx檔是不能隨意取名的。

若網站僅止於簡單的靜態網站，那麼這樣的變革實在不足造成困擾，就改改名稱而已。但．．．

若網站僅止於簡單的靜態網站，那麼這樣的變革實在不足造成困擾，就改改名稱而已。但．．．

但使用React的開發者大多在意網頁的互動性，而且Next.js其中一個特點就是提昇網頁效率的SSR(Server Side Rendering)。現在需要React Hook的頁面我們需要多加上”use client”在jsx檔的最上方，Next會把該頁面放在client端，也就是在一開始就送到user的瀏覽器上；若無註記，則全部當作SSR頁面，直接在Server端產出頁面，在user需要用到該頁面時才傳送。

如此一來，就改變了過去以 getServerSideProps()、getStaticProps() 作為讀取Server端資料抓取與function運行的方式。現在只要檔案上方沒有標註”use client”，寫在該jsx中的程式碼都可以運行在server上，算是方便不少。

最大的不習慣在於 API Route

最大的不習慣在於 API Route

要說最不習慣的地方，就是API route了…現在只要在頁面資料夾中加入route.js檔，任何url都可以成為 api！然後在route.js檔案裡的handler寫法有很大的改變：

//pages route的寫法

import type { NextApiRequest, NextApiResponse } from 'next'  
   
type ResponseData = {  
  message: string  
}  
   
export default function handler(  
  req: NextApiRequest,  
  res: NextApiResponse<ResponseData>  
) {  
  res.status(200).json({ message: 'Hello from Next.js!' })  
}

原本在pages route時期的handler跟express.js很像，除了next雞婆加入了bodyparser導致使用meddleware需要特別設定之外，其他的功能大致上跟直接用express.js並無二異。

export async function POST() {
const res = await fetch('https://data.mongodb-api.com/...', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'API-Key': process.env.DATA_API_KEY,
},
body: JSON.stringify({ time: new Date().toISOString() }),
})

  const data = await res.json()  
   
  return Response.json(data)  
}

在app route上，新的router handler變成上面的長相，可以發現他直接以HTTP method作為handler的名稱，只要是使用相應的method去打這個API時，就會觸發該handler。但這樣糟了，因為middleware就幾乎不能用了．．．

在一段看似抱怨的文字之後，我也必須說，Next 13 的確改善了許多的不便，只是感覺內部架構尚未穩定，很多與其他套件耦合的機制尚未明朗，在這個時候Next 14居然就出來了？實在讓人跌破眼鏡！

但無論如何，進步都是讓人欣喜的，希望Next 14能一掃開發者的疑惑，畢竟許多開發者都在推文中表示Next 13實在不夠穩定，期待新的紀元就要到來。

順便一提，在推文中有一位老兄昨天剛剪輯好了Next 13的教學影片到Youtube，今天就馬上過期了，可謂生命週期僅有一日。

這難道就是前端的宿命寫照嗎？