5分鐘入門 next13

風吹De麥浪發表於2023-09-21

5分鐘入門 next13

上半年vercel 推出了nextjs13 這個大版本，剛好最近有個c端的專案，所以就用了這個框架來寫，技術體系基本也是文件提到的 tailwindcss + ts + swr + ssr ，總的來開發體驗還可以，不管是打包速度、文件、錯誤資訊提示目前都還滿意，只不過目前nextjs13 中文資料有點少，不過問題也不大。

之所以只要5分鐘就可以入門，是因為我覺得nextjs官網文件寫的挺好的，我之前也沒有用過nextjs，看文件之後，上手寫東西也很快 https://nextjs.org/

檔案路由系統

next13 使用檔案約定路由，這樣就不需要配置 path 與元件的之間的對映關係了。

每一層路由必須建一個資料夾，在該資料夾中建立 page.tsx 作為該路由主頁面 如 域名是：http://baidu.com，頁面路徑是demo，檔案結構如下

app
 demo
  page.tsx
  loyout.tsx 

比如在目前這個專案中沒有授權的頁面路徑是 /noAuth ，對應的程式碼結構就是在跟目錄下建一個noAuth 資料夾，資料夾中新建一個 page.tsx 即可即可。

5分鐘入門 next13

透過上面，我們知道app 內資料夾會被當作路由結構來解析，如果要自己的資料夾，可以下劃線開頭的命名，如

5分鐘入門 next13

通常我們會在這種資料夾中放一些業務元件或者公共元件。

app 路由模式

next13 預設是app 路由模式，這個模式下我們可以建立一些固定名稱的元件，layout、template、page  [jx、jsx、ts、tsx]，這些固定名稱的元件有不一樣的作用， page.tsx 就是我們該模組下的首頁。

  • layout.tsx 該路由下的公共導航，切換路由時，不會重新整理，類似模版頁，page.txs 就是layout 頁面中的 children
  • template.tsx 該路由下的公共部分，切換路由時，會重新整理
  • page.tsx 該路由的主頁面

5分鐘入門 next13

layout.tsx 類似模版頁，有了這個模版頁面，我們可以很方便的編寫統一的佈局、樣式，以及可以利用layout 巢狀來實現子模組個性的佈局。

服務端元件

在Next13中，app目錄下的元件預設都是服務端元件，在伺服器中渲染好dom節點再返回到瀏覽器（預設沒有互動）。

有了服務端元件，我們可以在React應用中用同一套React語法，混合使用服務端元件和客戶端元件。

如果需要轉換成客戶端元件，只需要在檔案的開頭使用 use clinet 即可。

服務端元件幾個比較特別的好處

  • 在服務端元件中發起請求，可以在請求返回HTML前，就完成資料的讀取。相比原來JS應用從服務端傳送JS資源到客戶端，React完成渲染後再向服務端請求資料，大幅減少FCP（首次內容繪製時間）。
  • 有效減少傳送到瀏覽器的JS包體積。
  • 傳統SSR的各種優勢（SEO友好，首屏渲染快）。

伺服器和客戶端元件可以組合在同一元件樹中，並且他們可以混合使用，通常客戶端元件最好在元件樹中的葉子節點位置（有互動的元件）。

5分鐘入門 next13

理論上在nextjs中，服務端、客戶端元件應該像上面圖那樣來劃分，外層容器、以及列表資料的獲取用服務端元件、互動部分小的元件用客戶端元件，這樣效率應該不錯。

目前服務端元件、客戶端元件資料同步的方式還不是太好，目前我只知道透過在服務端元件使用props 的方式。

如果可以做到在客戶端元件透過什麼東西直接拿，然後資料又是實時同步，類似在服務端元件、客戶端元件都能拿到想要的資料狀態，且資料保持一致。

服務端元件渲染策略：

  • 靜態渲染
  • 動態渲染
  • 流式渲染

其他的也貌似沒什麼寫的，還是多看看官方文件比較好 https://nextjs.org/docs 

遇到的問題

nest13 globalThis is not defined

5分鐘入門 next13

解決方案：一開始我以為我安裝了 globalthis 模組，然後在根 layout 中引入即可。信心滿滿的打包，部署，然後發現還是報錯。

5分鐘入門 next13

後面在github的issues 中發現要用Script 元件引入，然後我改成下面這種就可以了。

5分鐘入門 next13

配置多個環境，打包不同的環境變數

我們部署的時候有測試環境，預生產、灰度、生產等多個環境，不同的環境，有些配置是不一樣 如url、或者其他的配置。

一開始我看到文件說 NODE_ENV === development 環境，載入的是.env.development，同理 production 載入的是.env.production，那麼我只要設定NODE_ENV 在不同環境下是不同的值即可。

但是經過測試，我發現 只要是 build 的命令，next的環境變數 NODE_ENV 一直都是production，覆蓋不了，所以這種方式行不通，只能在增加一個環境變數來區分。

所以還是隻能透過老辦法，透過cross-env 傳遞變數，然後在 next 的配置檔案中寫入到nextjs 中，在透過 process.env.xx 使用即可。

"scripts": {
    "dev": " cross-env BUILD_ENV=test next dev -p 3001",
    "build:test": "cross-env BUILD_ENV=test next build",
    "build:pre": "cross-env BUILD_ENV=pre next build",
    "start": "next start -p 3001",
    "lint": "next lint"
  },
      
 // 配置檔案中在寫入
  env: {
    BUILD_ENV: process.env.BUILD_ENV || "test",
    buildTime: new Date().toLocaleString()
  },
      
 // 使用
  console.log("當前環境", process.env.NODE_ENV);
  console.log("環境變數：", process.env.BUILD_ENV);
  console.log("打包時間：", process.env.buildTime);

小結

  1. nextjs13 是一個全棧的開發框架、也提供了一些常用的元件
  2. 服務端元件、客戶端元件混合使用、以及服務端元件渲染策略
  3. app 路由的 page、layout、loading 等固定的元件名稱
  4. tailwindcss 、swr 還挺好用的

 

相關文章