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 即可即可。

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

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

app 路由模式

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

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

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

服務端組件

在Next13中，app目錄下的組件默認都是服務端組件，在服務器中渲染好dom節點再返回到瀏覽器（默認沒有交互）。

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

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

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

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

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

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

目前服務端組件、客戶端組件數據同步的方式還不是太好，目前我只知道通過在服務端組件使用props 的方式。

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

服務端組件渲染策略：

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

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

遇到的問題

nest13 globalThis is not defined

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

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

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

我們部署的時候有測試環境，預生產、灰度、生產等多個環境，不同的環境，有些配置是不一樣 如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 還挺好用的