在開始一個新專案時，我經常發現自己在
Gatsby
和
Next
框架之間進行選擇。
但我幾乎從剛開始編碼的時候就愛上了
Gatsby
。後來我將
Jamstack
和
Gatsby
作為主要架構使用。
但是隨著時間的流逝，然後我注意到了另一個很棒的
React
框架
Next
。乍一看非常相似，但深入觀察時又有所不同。
Gatsby和Next到底是關於什麼的？
這兩個框架都是在
React
的基礎之上建立的。
這意味著您擁有所有
React
的基礎，這些基礎可為您提供
create-react-app
樣板以及附加功能、工具包和應用程式應如何編碼的指南。
正如我上面提到的，乍一看它們都非常相似，因為它們：
從樣板建立應用程式允許開發人員更快地對網站進行編碼，從而生成對
SEO
友好且超快速的網站。
但是有兩個方面：
Gatsby。js
僅適用於靜態內容。前一段時間它只用於儲存在
CDN
中的靜態內容，現在
Gatsby。js
提供了一個複雜的產品，可以用於靜態網站和動態應用程式。
Next。js
是一個伺服器端渲染框架。從
v9。3
開始，我們可以選擇使用哪種方法：伺服器端渲染或靜態站點生成。
Public檔案
名為
public
的資料夾包含
Gatsby。js
的構建檔案和
Next
的靜態資產。最後一個為構建檔案建立一個
。next
檔案。
在這兩個樣板中，我們還有配置檔案，我們可以在其中為專案提供設定。兩者都為我們生成不同的檔案。
外掛、外掛和庫
他們圍繞其功能和社群構建外掛生態系統，這是您肯定會注意到的一個重要功能，因為它提高了工作速度。只需最少的設定時間，只需貼上程式碼並實現幾乎所有外部整合。
Next
沒有這種功能，但是兩個框架都支援所有的
React
庫。簡而言之，您可以在兩個框架中實現您的整合，這只是
Next
中的一個延長時間的情況，但
Gatsby
做得更快（顯然取決於整合的複雜性）。
路由
有一個資料夾
“
pages
”，我們所有的頁面元件都將存放在其中。將自動生成帶有該資料夾內元件名稱的頁面。您應該使用特殊的連結元件在內部頁面之間進行路由。
檔案結構的其餘部分並不重要，因為您可以隨意組織它：元件、上下文、實用程式等。
編碼感覺如何？
這兩個框架的建立都是為了讓開發人員的生活壓力更小。兩者都處理日常事務，讓我們專注於程式碼的意義。它們允許我們進行創作。
文件
如果你已經知道如何構建基於
React
的專案，那麼學習這兩個框架並不是一件難事。
Gatsby
和
Next
都有全面的文件和大量教程。只需跳入其中即可完成任務！
Gatsby外掛
我已經提到
Gatsby
構建了一個外掛生態系統。你可以找到幾乎所有你需要的外掛：很多
gatsby
元件、
gatsby-source
外掛、
gatsby-integrations
等等。
GraphQL適用於一切
Gatsby
中的另一個驚人之處——
GraphQL
適用於所有查詢。專案內外。我不得不使用它，但現在我發現它非常有用。你可以始終在與本地主機上的專案一起執行的
GraphQL Playground
中檢查您的查詢。
影象最佳化
Gatsby。js
提供影象最佳化，他們準備了一個叫做
gatsby-image
的驚人元件，這個元件完成了我們進行影象最佳化所需的一切。
Next。js
沒有特殊的外掛，也沒有開箱即用的
GraphQL
。它也有一個特殊的影象元件，但它沒有模糊的效果。
但是
Next。js
有很多其他特性，這使它成為許多人的最愛。
無伺服器功能
例如，
“
api
”資料夾是從一開始就生成的。我在上一個區塊中沒有提到它，但它肯定是值得的。當專案託管在
Vercel
或
Netlify
上時，此資料夾中的每個
js
檔案都將作為無伺服器函式執行。這些函式處理使用者身份驗證、表單提交、資料庫查詢、自定義
slack
命令等邏輯。
SSG + SSR什麼？
Next。js
的另一個偉大之處——混合方法。這意味著您可以結合靜態站點生成
（SSG）
和伺服器端呈現
（SSR）
。我們從
9。3
版本開始就得到了這種可能性，我也發現它非常有用。
好了，本文到此結束。如果對程式設計、計算機、程式設計師方面感興趣的話，歡迎私信聯絡我，隨時交流！點個關注，是對我莫大的鼓勵！