【NEXT.JS 系列】建立一個 Next.js App

要從頭開始使用 React 建構完整的 Web 應用程式，您需要考慮許多重要的細節：

• 程式碼必須使用 webpack 之類的打包器打包，並使用 Babel 之類的編譯器進行轉換。
• 您需要進行生產優化，例如程式碼拆分。
• 您可能希望靜態預先渲染某些頁面以提高性能和 SEO。 您可能還想使用服務器端渲染或客戶端渲染。
• 您可能需要編寫一些服務器端程式碼來將您的 React 應用程式連接到您的數據儲存位置。

一個框架可以解決這些問題。 但是這樣的框架必須具有適當的抽象層級 —否則它不會很有用。 它還需要具有出色的「開發人員體驗」，確保您和您的團隊在編寫程式碼時擁有令人驚嘆的體驗。

Next.js：React 框架

Next.js 為上述所有問題提供了解決方案。 但更重要的是，它會讓你和你的團隊在建構 React 應用程式時掉入「成功的陷阱」（pit of success）。

Next.js 旨在擁有一流的開發人員體驗和許多內建功能，例如：

• 直覺的基於頁面的路由系統（支援動態路由）
• 每一個頁面都支援預先渲染，靜態生成 (SSG) 和服務器端渲染 (SSR)
• 自動程式碼拆分以加快頁面加載速度
• 具有優化預取的客戶端路由
• 內建 CSS 和 Sass 支援，並支援任何 CSS-in-JS 函式庫
• 支持快速刷新的開發環境
• 使用無服務器函數建構 API 端點的 API 路由
• 完全可擴展

Next.js 用於數以萬計的面向生產的網站和 Web 應用程序，其中包括許多世界上最大的品牌。

關於這篇教學

這個免費的互動課程將指導您了解如何開始使用 Next.js。

在本教學中，您將通過建立一個非常簡單的部落格應用程式來學習 Next.js 基礎知識。 這是最終結果的示範：

https://next-learn-starter.vercel.app（來源）

設置

首先，讓我們確保您的開發環境已準備就緒。

• 如果您沒有安裝 Node.js，請從此處安裝。 您需要 Node.js 版本 10.13 或更高版本。
• 您將在本教學中使用自己的文字編輯器和終端應用程式。

建立一個 Next.js App

要建立 Next.js 應用程式，請打開您的終端機，cd 進入您要在其中建立應用程式的目錄，然後執行以下命令：

$ npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

在幕後，這使用了名為 create-next-app 的工具，它為您引導 Next.js 應用程式。 它通過 -example 標誌使用此模板。

如果它不起作用，請查看此頁面。

運行開發服務器

你現在有一個名為 nextjs-blog 的新目錄。 讓我們 cd 進入它：

$ cd nextjs-blog

接著執行下面指令

$ npm run dev

這會在端點 3000 上啟動 Next.js 應用程式的“開發服務器”（稍後會詳細介紹）。

讓我們檢查一下它是否有效。 從瀏覽器打開 http://localhost:3000 瞧瞧吧。

歡迎來到 Next.js

當您訪問 http://localhost:3000 時，您應該會看到這樣的頁面。 這是入門模板頁面，其中顯示了有關 Next.js 的一些有用訊息。

接著我們來試著編輯頁面

編輯頁面

讓我們嘗試編輯起始頁。

• 確保 Next.js 開發服務器仍在運行。
• 使用文字編輯器打開 pages/index.js。
• 在 <h1> 標籤下找到寫著 “Welcome to” 的文字並將其更改為 “Learn”。
• 保存文件。

保存文件後，瀏覽器會自動使用新文字更新頁面：

Next.js 開發服務器啟用了快速刷新。 當您對文件進行更改時，Next.js 幾乎會立即自動在瀏覽器中套用更改。 無需刷新！ 這將幫助您快速迭代您的應用程式。

下一步：建立頁面

很好，我們的第一課到此告一段落。

在下一課中，我們將討論建立更多頁面以及如何在頁面之間導航。

註：您應該保持開發服務器運行，但如果要重新啟動它，請按 Ctrl + c 停止服務器。