隨著Next.js被稱為生產用的React框架，很明顯，你可以用Next.js快速構建和部署大規模和企業級的應用程式到生產中。
Next.js所具備的功能可以保證讓你的應用程式在短時間內從零到生產，同時提供一個易於學習的曲線、簡單性和強大的工具，供你使用。
Next.js擴充套件了原始的Facebook React庫和create-react-app包，以提供一個可擴充套件的、易於使用的和可生產的React框架。
本指南將帶領你瞭解Next.js，探討為什麼你應該使用Next.js，以及在生產中使用Next.js的不同應用。此外，我們將討論Next.js的元素，包括Next.js的特點。最後，我們將學習如何建立我們的第一個Next.js應用程式。
什麼是Next.js？
Next.js是一個React框架，它允許你使用React框架建立超強的、有利於SEO的、極度面向使用者的靜態網站和網路應用。Next.js以在構建具有你所需要的所有功能的生產就緒的應用程式時的最佳開發者體驗而聞名。
它具有混合靜態和伺服器渲染、TypeScript支援、智慧捆綁、路由預取等功能，無需額外配置。
為什麼使用Next.js
本節將探討為什麼你應該學習Next.js。我們還將看看你可以用Next.js構建的不同應用程式。
影象優化
Next.js提供了即時構建的自動影象優化功能。影象優化是一個預置在Next.js中的強大功能，因為管理和優化影象需要許多配置，而手動優化影象會佔用你的生產時間。
國際化
Next.js中新增的另一個偉大功能是國際化。建立一個企業應用程式可以很容易地被使用和翻譯成全球不同的語言。這個功能是Next.js的新增功能，使Next.js在國際上得到認可，因為它需要更少的配置來實現內部化設定。
Next.js分析
Next.js提供了一個分析儀表板，可以配置為從開箱即顯示準確的訪客資料和頁面洞察力。有了這個功能，你可以快速建立一個分析儀表板，並獲得對你的訪客和頁面洞察力的寶貴見解，而無需額外的編碼或配置。
Next.js儀表盤顯示實時使用者效能和體驗得分。
零配置
Next.js會自動編譯和構建熱重新整理，而不需要你做任何額外的配置，它還會自動擴充套件和優化你的生產應用。
在傳統的前端應用程式上實現熱重新整理或自動重新整理，有很多障礙。它需要選擇和安裝正確的庫，並對每個庫進行配置，使其正常工作。Next.js解決了這個問題，它提供了開箱即用的熱重新整理功能，不需要你的安裝和配置。
預建的SSR、SSG和CSR支援
使用Next.js，你可以在一個應用程式中支援伺服器端渲染、靜態生成和客戶端渲染。你可以決定你要構建的應用程式的型別，以及你打算如何編譯你的應用程式，以最適合你的使用情況。
伺服器端渲染使Next.js適合於大規模的面向SEO的生產型應用，而且配置它是很容易的。
使用Next.js的應用程式
以下是用Next.js開發的應用程式列表。由於Next.js得到了財富500強企業的支援，包括GitHub、Uber和Netflix。
以下是用Next.js構建的前5個應用程式。
TikTok
TikTok的官方主頁。
TikTok是一個盛行的社會化線上視訊社羣，使用者在這裡上傳移動短視訊，每天有數百萬的使用者。
TikTok的網頁是用Next.js開發的，可以為數百萬的日活躍使用者進行擴充套件和優化。
Hashnode
Hashnode的官方主頁。
Hashnode是一個針對開發者的免費線上部落格平臺，它是用Next.js構建的。Hashnode記錄了數以百萬計的使用者，使Next.js適合於為小型到大型應用提供動力。
Twitch Mobile
Twitch的官方主頁。
Twitch是一個線上社交平臺，用於聊天、互動和欣賞不同型別的內容和娛樂。Next.js也為其提供支援。
Hulu
Hulu的官方主頁。
Hulu是一個類似於Netflix的流媒體平臺，允許使用者線上觀看用Next.js建立的電影和電視節目。
Binance
Binance的官方主頁。
Binance是一個流行的加密貨幣入口網站，擁有新聞、價格票據和買賣的可能性，每天記錄數百萬活躍使用者和加密貨幣交易。Next.js也為Binance提供動力。
要了解更多使用Next.js的公司和網站，你可以訪問Next.js的官方展示頁面，瞭解更多資訊。
你可以構建什麼
在Next.js中，你可以開發的應用程式的型別沒有限制。你可以使用Next.js開發不同型別的應用程式。而且，你選擇用Next.js建立的任何應用程式仍將擁有Next.js的所有好處和功能，而無需你進行任何額外的配置。
以下是你可以用Next.js建立的應用程式型別的列表：
- MVP（最小可行產品）
- Jamstack網站
- 網路門戶
- 單一網頁
- 靜態網站
- SaaS產品
- 電子商務和零售網站
- 儀表盤
- 複雜和高要求的網路應用
- 互動式使用者介面
Next.js的特點
下面我們將闡述Next.js的特點，以及在專案中使用Next.js可以獲得什麼。
路由
路由是Next.js的基本功能之一。Next,.js使用基於頁面的pages路由系統來構造你的應用程式的路由的樣子。在pages資料夾內建立的每個檔案和資料夾都會自動轉換為Next.js的路由。
Next.js的路由系統分為3種不同的型別，下面，我們將分別探討它們。
Index Routing
page資料夾自動擁有index.js，它成為主頁路由 /的路由。你也可以在任何資料夾中為你的所有路由定義一個index.js頁面。例如，你可以定義pages/profiles/index.js，它將自動被對映到/profiles頁面。
以這個例子為例：
- pages - index.js - profile - index.js - [user].js
上述頁面結構將把資料夾和檔案對映成一個URL結構。例如，/代表pages/index.js，/profile/代表pages/profile/index.js，/profile/user代表頁面/profile/user.js。
巢狀路由
巢狀路由是在一個父路由中建立的。要建立一個巢狀路由，你需要在pages資料夾中建立一個父路由/資料夾，並在其中新增資料夾或檔案來建立一個巢狀路由。
請看這個例子：
- pages - index.js - dashboard - index.js - user.js
在上面的指令碼中，user.js和index.js檔案被巢狀在dashboard父路由中，這意味著這些URL只能通過dashboard路由訪問。
動態路由
是通過動態路由實現的。動態路由總是不確定的。它們可以通過API呼叫生成，或者給URL分配一個ID或slug。
要在Next.js中建立一個動態路由，在檔名或目錄名周圍新增一個方括號[id].js。你可以給檔案或目錄起任何名字，但必須附加一個方括號[]，以使其成為動態的。
看一下這個例子：
- pages
- dashboard
- [user].js
- profile上面的指令碼使[user].js成為動態的，這意味著必須用/dashboard/2/profile或/dashboard/johndoe/profile來訪問配置檔案頁面。
從官方文件中，你可以瞭解更多，以及在Next.js中建立一個更高階的路由系統的不同技巧。
靜態檔案服務
在Next.js中，提供靜態檔案或資產（如圖示、自營字型或影象）是通過public資料夾完成的，這是靜態資產的唯一真實來源。
根據Next.js的文件，public資料夾不應該被重新命名。根據Next.js的配置方式，通過public資料夾提供靜態資產是非常直接的。
預渲染
Next.js的巨大功能之一是預渲染，它使Next.js工作得非常好、非常快。Next.js通過預先生成每個頁面的HTML和它們需要執行的最小的JavaScript，通過一個被稱為Hydration的過程來預渲染每個頁面。
Next.js的預渲染有兩種形式：
- 伺服器端渲染 (SSR)
- 靜態生成（SG）
如何獲取資料是SG和SSR的關鍵區別。對於SG來說，資料是在構建時獲取的，並在每次請求中重複使用（這使得它更快，因為它可以被快取），而在SSR中，資料是在每次請求中獲取的。
絕對匯入
從Next.js 9.4開始，引入了絕對匯入，這意味著你不再需要匯入目錄相對較長的元件。
例如，你不需要匯入下面這樣的元件了：
import InputField from "../../../../../../components/general/forms/inputfield"
但你使用以下樣式來匯入元件：
import InputField from "components/general/forms/inputfield";
連線頁面
Next.js提供了next/link，用於在頁面之間進行導航。在你的應用程式中的頁面之間的導航可以通過next/link匯出的Link元件來實現。
假設我們在你的pages資料夾裡有這些頁面結構，而你想把這些頁面連結在一起，你可以用下面的指令碼實現它：
- pages - index.js - profile.js - settings.js - users - index.js - [user].js
你用下面這個指令碼將這些頁面連線起來：
import Link from "next/link";
export default function Users({users) {
return (
<div>
<Link href="/">Home</Link>
<Link href="/profile">Profile</Link>
<Link href="/settings">
<a> Settings </a>
</Link>
<Link href="/users">
<a> Settings </a>
</Link>
<Link href="/users/bob">
<a> Settings </a>
</Link>
</div>
)
}
樣式化
Next.js為您提供了在專案中建立和擁有多種樣式的可能性。預設情況下，Next.js開箱即有三種不同的樣式，即：全域性CSS、CSS模組和style-jsx。
Next.js的弊端
就像每一個好東西一樣，Next.js也有它的缺點，在你的下一個專案中使用它之前，你必須考慮這些缺點。在本節中，我們將探討Next.js的缺點。
開發和維護成本
對於Next.js，靈活性伴隨著開發和維護的高成本。要對應用程式進行修改和維護，你需要一個專門的Next.js開發人員和前端專家，他們的成本會更高。
缺少內建的狀態管理器
Next.js不支援開箱即用的狀態管理。如果你需要任何狀態管理，你必須安裝它並像使用React那樣使用它。
外掛少
使用Next.js，你將無法獲得許多易於適應的外掛。
如何建立Next.js應用程式
本節將探討Nuxtjs的實際應用以及如何建立NuxtJS應用程式。然而，讓我們來探討一下開發Nuxtjs應用程式中的一些基本概念。
建立Next.js應用程式
建立一個新的Next.js專案是非常容易的，而且直奔主題。你可以用不同的方式建立Nuxt專案，但最喜歡和推薦的方法是CLI。
要用CLE建立一個新的Next.js應用程式，確保你已經安裝了npx（npx從npm 5.2.0開始預設發貨）或npm v6.1或yarn。
接下來，在你想放置Next.js專案的正確資料夾中鍵入以下命令：
npx create-next-app // Follow the instructions to create your first Next.js project. cd <project-name> npm run dev
請確保將<project-name>替換為你的實際專案名稱。然後你可以開始建立你的專案所需的不同頁面和元件。
Next.js元素
在建立一個新的Next.js專案時，你會發現它帶有不同的元素、頁面和資料夾結構，對於初學者來說，可能會感到難以掌握。不過，我們將在下面探討Next.js的一些元素。
資料夾結構
從CLI建立一個新的Next.js專案後，你會發現Next.js應用程式有一個精簡的資料夾樹。這種預設的資料夾結構是執行Next.js應用程式的最基本條件。當你開始構建你的專案時，你將擁有比框架最初更多的資料夾和檔案。
唯一的Next.js特定資料夾是pages、public和style資料夾。除非你準備調整額外的配置，否則這些資料夾不應該被重新命名。
下面是一個新Next.js專案的預設資料夾結構：
# other files and folders, .gitignore, package.json... - pages - api - hello.js - _app.js - index.js - public - favicon.ico - vercel.svg - styles - globals.css - Home.module.css
頁面
頁面是Next特有的資料夾之一，下面是你需要知道的關於Next.js頁面的一些事情。
Pages是React元件，pages資料夾裡的每個檔案都是一個網頁，每個網頁都是一個React元件。例如，我們在Pages資料夾裡面有一個React元件，形成了一個網頁的URL。
// Location: /pages/index.js
// is just a basic React component
export default Index() {
return <h1>Welcome to Home</h1>
}
Next.js帶有預先建立的以下劃線為字首的自定義頁面，如_app.js和_document.js。Next.js使用_app.js自定義頁面元件來初始化這些頁面。它駐留在pages資料夾內，而_document.js自定義頁面元件增強了你的應用程式的 <html> 和 <body> 標籤。
該框架還使用了一個基於檔案的路由系統，其中每個頁面根據其檔名自動成為一個路由。例如，page/user的頁面將位於/user，而pages/index.js則位於/。
小結
在使用React構建企業和生產就緒的應用程式時，應該想到Next.js，因為它的功能、工具和配置都是為了簡化構建生產應用程式的麻煩。
在本指南中，我們已經探討了這個框架的不同功能，並確定了為什麼你應該使用Next.js構建你的下一個企業就緒應用程式。你現在知道了，即使你以前從未嘗試過Next.js，也有足夠的理由讓你去試試。
評論留言