React Next 項目初體驗

項目背景

國際化官網

項目結構

|-- .next  
|-- components --------------- 組件
|-- lang --------------------- 多語言
|-- pages -------------------- 頁面
|-- scripts ------------------ 腳本文件
|-- static ------------------- 靜態資源
|-- utils -------------------- 自定義或其餘庫以及封裝文件
|-- .babelrc
|-- .eslintignore
|-- .eslintrc
|-- .gitignore
|-- .prettierrc
|-- next.config.js
|-- package.json
|-- prettier.config.js
|-- README.md
|-- server.js
|-- yarn.lock

項目搭建

多語言：react-intl

樣式：起初使用的是 jss，後來改爲了引入外部樣式文件

http 請求：data-fetch

UI 庫：antd-design-less

路由：withRouter

全部示例均參考自 next 官方

踩坑

痛點：

1. 國際化語言切換
2. 自定義字體不生效
3. 樣式使用 import 引入到對應 jsx 文件，發佈到生產環境以後樣式不立馬生效
4. antd-design 表單樣式發佈到生產環境同上

填坑

1. 最終採用將語言做爲路由查詢參數，跳轉時帶向各頁面，配合使用 Ant Design 的 ConfigProvider
2. 自定義樣式配置

3. 在 next.config.js 文件中增長用戶自定義樣式配置代碼

   const themeVariables = lessToJS(fs.readFileSync(path.resolve(__dirname, './static/style/antd-custom.less'), 'utf8'));

   不在單個文件中引入相應的樣式文件，而是把樣式文件都在用戶自定義樣式文件先引入

4. 在 .babelrc 文件將 antd 庫做爲插件（plugins）引入，在 static 文件夾下新建 style 文件夾（存放樣式文件），新建 index.less 文件，在文件中引入 antd 樣式

   @import '~antd/dist/antd.less';

5. 生產環境發起請求須要，設置反向代理（express）

GET

獲取當前 URL 參數：在鉤子 componentDidMount 裏面獲取

```

componentDidMount() {
    const search = window.location.search;
    console.log(search); // 獲取 url ? 後帶的參數
}

```

注意

不要自定義靜態文件夾的名字，只能叫 static ，由於只有這個名字 Next.js 纔會把它看成靜態資源。（出自文檔： next文檔）

---

Ending

看過那麼多別人寫的 react 項目，這是第一個本身上手的實戰項目，還用到了 next.js 作服務端渲染。雖然項目很簡單，幾乎純展現，難度係數較低，但對於 react 入門級小白而言，第一次參與 react 實戰，仍是從零到一本身搭建（固然，期間有大佬相助），仍是能有所收穫。

由於以前寫 vue 項目的時候學到了該如何的劃分組件，怎麼定義組件，因此對於頁面和組件拆分幾乎沒有問題。這次實戰，對 jsx 語法有了更進一步的瞭解，可是對 react 的生命週期還不是很瞭解，至少沒有在這次項目中體現。對於組件間的傳值，會用大於理解。對於 react 高階組件，有待深刻體驗。