Next.js 是一個(gè)強(qiáng)大的用于構(gòu)建React應(yīng)用的框架，當(dāng)與TypeScript結(jié)合使用時(shí)，它提供了強(qiáng)大的類型檢查和工具，可以顯著提升我們的開發(fā)體驗(yàn)。

多年來(lái)我一直在使用 Next.JS，在開發(fā)大型可擴(kuò)展web應(yīng)用時(shí)，我發(fā)現(xiàn)它是一個(gè)出色的工具，甚至比Create React App 還要好。

在過(guò)去幾年里，NextJS 不斷發(fā)展，同時(shí)保持了其內(nèi)部的可擴(kuò)展抽象。在構(gòu)建眾多應(yīng)用時(shí)，我發(fā)現(xiàn)最有價(jià)值的是如何正確地抽象你的代碼。

找到一個(gè)關(guān)于構(gòu)建精通的"Hello World"應(yīng)用的手冊(cè)并不是特別困難。盡管它們可能解釋得很好，但這類故事中最大的瓶頸是當(dāng)你需要開始處理真實(shí)世界的事物時(shí)。

一旦你被要求構(gòu)建一個(gè)帶有身份驗(yàn)證、多個(gè)API、服務(wù)和數(shù)據(jù)結(jié)構(gòu)的NextJS應(yīng)用，它與"Hello World"完全不同。

在本文中，我們將介紹如何使用 TypeScript 設(shè)置 Next.js 項(xiàng)目，處理導(dǎo)航，管理注冊(cè)/登錄/登出，以及有效地使用SVG資產(chǎn)，這些都將以你編寫真實(shí)的、生產(chǎn)就緒的應(yīng)用的方式進(jìn)行描述。

先決條件

在本文中，我們將嘗試復(fù)制一個(gè)全棧社交閱讀俱樂(lè)部應(yīng)用。雖然我們不會(huì)涉及任何后端內(nèi)容，但我們將使用瀏覽器的 LocalStorage 和 SessionStorage 來(lái)假裝我們?cè)谑褂脼g覽器。

因此，一旦你需要攜帶后端，你將能夠輕松地切換到nodeJS + MongoDB/PostgressDB。無(wú)論如何，讓我們開始吧。

讓我們想象一下，你被要求：

• 創(chuàng)建必要的頁(yè)面：/，/feed，/signup，/signin，/signout，/:username，/friends。
• 創(chuàng)建導(dǎo)航菜單，考慮響應(yīng)式設(shè)計(jì)。
• 集成用戶認(rèn)證/登出流程，以便我們不會(huì)暴露內(nèi)部社交數(shù)據(jù)。
• 添加CRUD操作以管理用戶帖子和好友列表。
• 用基本的顏色主題和整體樣式來(lái)設(shè)計(jì)應(yīng)用；

聽(tīng)起來(lái)相當(dāng)簡(jiǎn)單？確實(shí)如此。我們不需要使用過(guò)于復(fù)雜的例子來(lái)真正觸及架構(gòu)設(shè)計(jì)。上述需求集是你在真實(shí)世界的應(yīng)用中需要覆蓋的內(nèi)容，所以我們嘗試掌握它。

使用TypeScript設(shè)置Next.js項(xiàng)目

首先，我們使用TypeScript初始化一個(gè)新的 Next.js 項(xiàng)目。打開你的終端并運(yùn)行以下命令來(lái)創(chuàng)建一個(gè)新的Next.js項(xiàng)目并進(jìn)入項(xiàng)目目錄：

npx create-next-app@latest my-nextjs-app --typescript
cd my-nextjs-app

通過(guò)這個(gè)，我們將初始化NextJS框架并在其中添加typescript。它將創(chuàng)建一個(gè)Starter Kit環(huán)境來(lái)開發(fā)我們未來(lái)的應(yīng)用。

在 package.json 或 tsconfig.json 文件方面沒(méi)有什么特別有趣的內(nèi)容需要覆蓋，因?yàn)樗鼈兪情_箱即用的，你可以在網(wǎng)上找到關(guān)于它們?nèi)绾喂ぷ鞯谋匾畔ⅲ宰屛覀兗僭O(shè)你已經(jīng)知道它們是如何工作的。

我們開始架構(gòu)設(shè)計(jì)。

設(shè)計(jì)應(yīng)用架構(gòu)

所以這個(gè)故事的第一步是從選擇正確的文件夾結(jié)構(gòu)開始。

雖然一些文件夾（如/pages）默認(rèn)已定義，但我們需要自己設(shè)計(jì)其余的必要項(xiàng)。但是，我們先討論pages。

?? ./app

這是NextJS的核心文件夾，在大多數(shù)情況下，它可以保持盡可能簡(jiǎn)單。大多數(shù)時(shí)候，這是你想設(shè)置核心邏輯的地方。

圖片

• favicon.ico — 用于瀏覽器標(biāo)簽視覺(jué)設(shè)計(jì)的.ico文件。
• layout.tsx — 一個(gè)內(nèi)部NextJS應(yīng)用，將作為SSR或SSG渲染的入口點(diǎn)，但這不是我們的情況，因?yàn)槲覀儸F(xiàn)在的目標(biāo)是CSR。

?? ./pages

默認(rèn)情況下，NextJS為我們提供了一個(gè)漂亮的頁(yè)面開發(fā)抽象。你需要做的只是用必要的內(nèi)容填充文件夾。

所以這是我們的設(shè)計(jì)：

圖片

_app.tsx — 是NextJS項(xiàng)目的主要入口點(diǎn)。它將擁抱整個(gè)應(yīng)用，以便在運(yùn)行時(shí)可以服務(wù)。feed/friends/home/signin/signout/signup.tsx — 是靜態(tài)頁(yè)面，將代表需要在屏幕上顯示的頁(yè)面，沒(méi)有任何動(dòng)態(tài)行為。

[username].tsx — 是我所說(shuō)的"動(dòng)態(tài)行為"。一旦你有一個(gè)或多或少?gòu)?fù)雜的應(yīng)用邏輯，你會(huì)想要通過(guò)相同的靜態(tài)頁(yè)面顯示動(dòng)態(tài)內(nèi)容，但考慮到一些用戶的ID或其他動(dòng)態(tài)值。

?? ./components

這里我們可以存儲(chǔ)我們應(yīng)用的每個(gè)可重用組件。這是最適合那些可以在應(yīng)用的幾個(gè)區(qū)域/頁(yè)面中使用的東西的地方。

圖片

AddPostModal.tsx — 我們稍后將在我們的應(yīng)用中使用它，允許我們的用戶按需添加新帖子。

Header.tsx — 我們可重用的頭部，將在web應(yīng)用設(shè)計(jì)中扮演關(guān)鍵角色。

NavBar.tsx — 另一個(gè)可重用的組件，將代表應(yīng)用的導(dǎo)航。

?? ./auth

這個(gè)文件夾將擁抱應(yīng)用的核心邏輯，這將幫助我們識(shí)別我們的用戶是否登錄。

圖片

AuthContext.tsx — 用戶的認(rèn)證信息將存在的地方。我們將使用React Context來(lái)管理用戶登錄系統(tǒng)后的靜態(tài)數(shù)據(jù)。

withAuth.tsx — 是一個(gè)HOC函數(shù)，將幫助在應(yīng)用中共享用戶數(shù)據(jù)。

?? ./api

在處理應(yīng)用的不同層（表現(xiàn)/業(yè)務(wù)等）時(shí)，始終重要的是不要將它們混在一起。

此外，將你的API相關(guān)代碼移到它自己的文件夾是一個(gè)好的做法。

圖片

• **getCurrentUser.ts **— 從SessionStorage檢索登錄用戶數(shù)據(jù)的GET請(qǐng)求。
• getPosts.ts — 檢索用戶發(fā)布的可用帖子的GET請(qǐng)求。
• **getUsers.ts **— 檢索系統(tǒng)中所有注冊(cè)用戶的GET請(qǐng)求。
• setCurrentUser.ts — 用戶成功登錄/注冊(cè)后設(shè)置用戶數(shù)據(jù)的POST請(qǐng)求。
• setUsers/setPosts.ts — 用于填充LocalStorage以初始化應(yīng)用的POST請(qǐng)求。

?? ./hooks

在React的世界中（特別是說(shuō)到hooks時(shí)），最佳實(shí)踐始終是不要將UI邏輯與業(yè)務(wù)邏輯混在一起。在設(shè)計(jì)你的組件時(shí)，總是想辦法保持你的UI層盡可能的傻瓜化。

在這種情況下，我們可以將任何異步請(qǐng)求切分下來(lái)，將它們放入它們自己的封裝作用域中，這樣UI組件將保持小巧和清潔。

圖片

• useDataInitialize.ts — 我們的主要工具，用于初始化應(yīng)用運(yùn)行的一組模擬數(shù)據(jù)。
• usePosts/useFriends.ts— 這些hooks將使我們有機(jī)會(huì)以封裝的方式檢索朋友/帖子API響應(yīng)。
• useSignup/useSignin/useSignout.ts — 將幫助我們功能性地管理用戶認(rèn)證流程。

?? ./helpers

這是一個(gè)小工具，可以為任何類型的操作服務(wù)于我們的自定義需求。在這個(gè)文件夾中，總是好放一些只用于特定用例的東西，比如數(shù)據(jù)隨機(jī)化等。

圖片

• dataRandomizer.ts — 這是我們的主要helper，用隨機(jī)帖子/用戶數(shù)據(jù)填充應(yīng)用。

?? ./utils

這是一個(gè)相當(dāng)標(biāo)準(zhǔn)的文件夾，將通過(guò)組合可以在整個(gè)應(yīng)用中多次有用和可重用的東西來(lái)幫助提高應(yīng)用的可重用性。

圖片

• sortByDate.ts — 幫助按特定時(shí)間戳對(duì)數(shù)據(jù)數(shù)組進(jìn)行排序。

?? ./interfaces

在談到TypeScript時(shí)，你將需要處理類型和接口。在大多數(shù)Hello World應(yīng)用的情況下，它們應(yīng)該足夠小，可以自然地保留在代碼中。

然而，在真實(shí)世界的應(yīng)用中，你可能會(huì)將它們分開，這樣行數(shù)會(huì)比包含它們時(shí)顯著減少。

圖片

• **data.ts **— 我們的數(shù)據(jù)結(jié)構(gòu)接口，目前只有一個(gè)，當(dāng)然將來(lái)會(huì)有更多。

?? ./static

這個(gè)小文件夾將代表你想包含在應(yīng)用中的任何類型的靜態(tài)數(shù)據(jù)，如圖標(biāo)/圖片/gif/視頻等。

圖片

• logo.svg — 主應(yīng)用logo。

?? ./styles

最后但并非最不重要的是我們熟知的樣式文件夾。我鼓勵(lì)你使用CSS Modules，這樣你的代碼將保持隔離和不重復(fù)。盡管如此，一些代碼應(yīng)該保持集中并在整個(gè)站點(diǎn)范圍內(nèi)初始化。這就是存儲(chǔ)這些東西的地方，比如globals等。

圖片

• global.css — 應(yīng)用的核心可共享樣式。

核心架構(gòu)原則

好的，所以我們?cè)谠O(shè)計(jì)應(yīng)用架構(gòu)方面做得很好，現(xiàn)在我們可以專注于其他重要的事情，如代碼的可重用性和可維護(hù)性。

更少的耦合，更多的內(nèi)聚

圖片

內(nèi)聚指的是模塊/類的元素屬于一起的程度，建議相關(guān)的代碼應(yīng)該盡可能靠近，所以我們應(yīng)該爭(zhēng)取高內(nèi)聚，并將所有相關(guān)的代碼盡可能緊密地綁定在一起。這與模塊/類內(nèi)的元素有關(guān)。

耦合指的是不同模塊/類之間相互依賴的程度，建議所有模塊應(yīng)盡可能獨(dú)立，這就是為什么要低耦合。這與不同模塊/類之間的元素有關(guān)。

將業(yè)務(wù)邏輯從表示層中分離

很多時(shí)候，我看到人們?cè)噲D在UI組件的范圍內(nèi)混合所有東西。無(wú)論是單個(gè)還是幾個(gè)被切分下來(lái)，瓶頸仍然是無(wú)論你想更新UI還是業(yè)務(wù)邏輯，你都需要同時(shí)處理兩者。

只要組件一次包含多于1個(gè)事物，你就需要檢查/審查/測(cè)試每一個(gè)。

React帶給我們的一個(gè)更好的方法來(lái)簡(jiǎn)化代碼可維護(hù)性是Hooks。當(dāng)考慮代表組件調(diào)用一些API請(qǐng)求時(shí)，問(wèn)問(wèn)自己是否最好將這段代碼拿出來(lái)放到不同的文件夾/范圍并將其作為隔離的管理？

在那種情況下，我們將有一個(gè)看起來(lái)更好的UI層：

圖片

...以及業(yè)務(wù)層：

圖片

現(xiàn)在，注意這里你處理的是API調(diào)用 — getUsers()。想象一下，如果你把它的邏輯直接放在這里...呃，在一個(gè)地方維護(hù)所有這些會(huì)有點(diǎn)混亂。

這就是為什么我們之前設(shè)計(jì)了一個(gè)專門的API文件夾來(lái)保存我們的核心API邏輯：

圖片

最后是接口...這里你可以看到我們將它們從代碼中移出到我們可共享的./interfaces文件夾，這使得API代碼現(xiàn)在更加清晰、易于理解和可擴(kuò)展。

這是編寫干凈和高效代碼的4步最佳實(shí)踐，一旦你為你的NextJS項(xiàng)目設(shè)計(jì)了精心設(shè)計(jì)的抽象。我希望現(xiàn)在你更明白為什么我們需要按照上面討論的架構(gòu)進(jìn)行。

總結(jié)

仍然有許多事情需要涵蓋，因?yàn)樵O(shè)計(jì)應(yīng)用架構(gòu)不是一天就能完成的任務(wù)。一些公司花費(fèi)數(shù)月時(shí)間僅僅討論可能的架構(gòu)方式，然后才開始設(shè)計(jì)應(yīng)用架構(gòu)。

然而，我希望這個(gè)小小的真實(shí)世界例子能教會(huì)你如何更好地設(shè)計(jì)你未來(lái)的應(yīng)用，并在開發(fā)web應(yīng)用時(shí)給你一種正確抽象的感覺(jué)。