在選擇軟件庫或框架時,通常會考慮開發人員的經驗。
當我提到“開發人員體驗”時,我指的是開發人員實際上是如何完成工作的。 開發人員選擇使用愉快的庫或框架。
這是我們現在擁有最流行的庫和框架的主要原因之一。 作為開發人員,當已經創建了現有工具來幫助我們完成任務時,我們不必從頭開始。
框架是開發人員創建和使用以構建應用程序的軟件片段,NextJS 就是其中之一。
在這篇文章中,我們將介紹 Nextjs、它的主要特性以及我們如何使用它來構建應用程序。 讓我們直接跳進去。
Next.js 是什麼?
Next.js 是一個 JavaScript 框架,用於快速輕鬆地構建靜態網頁和基於 React 的在線應用程序。 它允許您為各種平台(包括 Windows、Linux 和 Mac)設計出色的 Web 應用程序。
如果您對 React 不太熟悉並且想了解有關 React 生態系統的更多信息,那麼您應該熟悉 Next.js 框架。
儘管 Next.js 附帶了您入門所需的一切,但您可以在 NPM 和 Yarn、JavaScript 和 TypeScript、CSS 和 SCSS、靜態導出和無服務器部署之間進行選擇。
功能
- 路由是自動完成的——您不需要配置任何東西,因為任何 URL 都映射到文件系統,映射到 pages 文件夾中的文件(當然,您有自定義選項)。
- 單個文件的組件 – 使用 styled-jsx 向組件添加樣式很簡單,它完全由同一個團隊集成和製作。
- 重新加載熱代碼 – 當 Next.js 檢測到保存到磁盤的修改時,它會重新加載頁面。
- 動態組件——您可以動態加載 JavaScript 模塊和 React 組件。
- 靜態導出 – Next.js 允許您使用下一個導出命令從您的應用中導出一個完全靜態的站點。
- 與環境的兼容性——Next.js 與 JavaScript、Node 和 React 生態系統無縫集成。
- 自動拆分代碼——僅使用所需的庫和 JavaScript 來呈現頁面。 Next.js 不是創建包含所有應用程序代碼的單個 JavaScript 文件,而是智能地將應用程序劃分為許多資源。
如何創建 next.js 應用程序?
安裝過程
您可以使用 node npx 命令安裝和構建 Next.js 項目。
這將生成一個文件夾以及運行 Next.js 項目所需的所有文件、配置和其他項目。
您可以在生成應用程序後啟動該應用程序。
頁面和路由
要使用 Next.js 處理路由,我們不需要使用路由框架。 使用 Next.js 進行路由設置起來很容易。 當您使用 create-next-app 命令構建新的 Next.js 應用程序時,該應用程序默認創建一個名為“pages”的文件夾。
這個“頁面”文件夾是您維護路線的地方。 因此,子目錄中的每個反應組件文件都將作為單獨的路由處理。
例如,如果文件夾包含這些文件:
- index.js
- 關於.js
- 文章.js
該文件將以三種方式自動轉換:
- 索引頁面 localhost/index
- 關於頁面 localhost/about
- 博客頁面 localhost/articles
about.js 頁面的示例如下所示。 如您所見,沒有提供有關該頁面的任何內容。 它只是一個標準的 React 功能組件。
路線
要製作嵌套路由,您必須首先建立一個子文件夾。 例如:頁面/文章。 在該文件夾中創建您的“contact.js”反應組件,它將生成頁面 localhost/articles/contact。
如果您將一個文件放在 pages/articles.js 中,將另一個文件放在 pages/articles/index.js 中。 兩者都反映了相同的路徑 localhost/blog。 在這種情況下,Next.js 只會渲染 article.js 文件。 動態路由呢,每篇博文都有自己的路徑:
- 本地主機/博客/第一篇文章
- 本地主機/博客/-第二篇文章
使用方括號表示法,您可以在 Next.js 中定義動態路由。 例如:pages/article/[slug].js
鏈接路線
您現在已經完成了您的第一條路線。 我猜你在問如何將頁面連接到這些路線。 您需要“下一個/鏈接”來執行此操作。
下面是一個主頁示例,其中包含指向“關於”頁面的鏈接:
如果您希望設置鏈接樣式,請使用以下語法:
重定向路線
如果您需要強制重定向到某個頁面怎麼辦? 例如,當按下按鈕時? 您可以通過使用“router.push”來完成此操作:
SEO
除了 HTML 正文中的數據之外,Web 應用程序中的頁面還需要元(頭)元素。 這將需要在 React 應用程序中安裝一個名為 React Helmet 的額外需求。
我們可以使用 Next/head 中的 Head 組件在 Next 中輕鬆地將元數據添加到我們的網頁中,這些元數據將顯示在搜索結果和嵌入中:
組件
您經常需要開發組件或佈局文件。 例如,呈現導航欄的組件。 到目前為止,我們剛剛使用了 pages 文件夾。 如果你的組件不是一個路由頁面怎麼辦?
您不希望用戶導航到諸如 localhost/navbar 之類的頁面。 如果將 Navbar.js 組件放在 pages 文件夾中,就會發生這種情況。 在這種情況下你應該怎麼做?
只需將所有“非頁面”組件存儲在單獨的文件夾中。 大多數 Next.js 項目使用綽號“組件”,並且此文件夾在項目的根文件夾中生成。
頭部組件
初始頁面加載由服務器端的 Next.js 呈現。 它通過修改頁面的 HTML 來做到這一點。 包括標題部分。
Next.js Head 組件用於提供標題和元數據等標題部分標籤。 在這個 Layout 組件示例中使用了 Head 組件。
未找到創建 404 頁面
製作自己的404錯誤頁面是可行的。 您可能希望自定義消息或添加您自己的頁面設計。 在 pages 文件夾中,創建 404.js 文件。
當發生 404 錯誤時,Next.js 會自動重定向到該頁面。 以下是個性化 404 頁面的示例:
從服務器端獲取數據
Next.js 允許您執行初始數據填充,而不是在客戶端下載數據,這意味著發送已從服務器填充的數據的頁面。
實現服務器端數據獲取有兩種選擇:
- 應在每個請求上獲取數據。
- 整個構建過程只獲取一次數據(靜態站點)
獲取每個請求的數據
getServerSideProps 方法用於在服務器端呈現每個請求。 此函數可以包含在組件文件的末尾。 如果組件文件中存在該函數,Next.js 將使用 getServerSideProps 對象自動填充您的組件道具。
在構建時獲取數據
getStaticProps 方法用於在構建時呈現服務器端。 此函數可以包含在組件文件的末尾。 此方法運行服務器代碼並向服務器發送 GET 請求,但僅在我們的項目完成時執行一次。
為什麼要學習 Next.js?
原因之一是因為 Next.js 構建在 React 之上,這是一個前端開發工具包,用於 創建用戶界面 這是我設計 Web 應用程序時最喜歡的選擇。
但是,如果 Next.js 不擅長它所做的事情,那還不夠……對吧?
那麼,它究竟是做什麼的呢?
我們必須首先定義一些概念才能理解它。 Next.js 之所以受歡迎,是因為它解決了許多 Web 開發人員在使用客戶端 Web 應用程序(在瀏覽器中)時遇到的問題。 這些單頁應用程序 (SPA) 具有更好的體驗,因為它們不需要用戶重新加載頁面並允許更多的交互性。
然而,由於像這樣的應用程序中的大部分材料只有在瀏覽器中執行時才可見,因此網絡爬蟲很難理解此類應用程序的文本內容。
結果,儘管它們很受歡迎,但許多 SPA 在很大程度上對谷歌等大型搜索引擎來說仍然是匿名的。 Next.js 現在包含更強大的內置機制,用於 React 組件的服務器端渲染 (SSR)。
Next.js 允許開發人員在構建過程中在服務器上構建 JavaScript 代碼,並向用戶提供基本的、可索引的 HTML。
優點
- 非常適合用戶體驗
- 非常適合 SEO
- 構建一個像動態一樣的超快速靜態網站
- 構建 UI 和 UX 的靈活性。
- 諸多發展優勢
- 強大的社區支持
缺點
- 網站或應用程序有一定的時間來構建或開發。
- 對於某些任務,Next.js 是不夠的。 開發人員應該能夠使用 Node.js 工具構建動態路由。
結論
如您所見,Next.js 簡化了 React 應用程序開發,並允許您專注於最重要的事情——您的應用程序邏輯和 UI。 它包括創建現代、前端豐富和 API 驅動的應用程序所需的一切。
由於它能夠構建靜態 HTML 頁面,因此它也適用於純內容項目,例如博客和商業網站。
在當前版本中,Next.js 不僅保持了高水平的開發人員體驗,還提供了提高視覺性能和用戶體驗的工具,確保了該框架的光明前景。
發表評論