要從頭開始使用 React 建構完整的 Web 應用程式,您需要考慮許多重要的細節:
一個框架可以解決這些問題。 但是這樣的框架必須具有適當的抽象層級 —否則它不會很有用。 它還需要具有出色的「開發人員體驗」,確保您和您的團隊在編寫程式碼時擁有令人驚嘆的體驗。
Next.js 為上述所有問題提供了解決方案。 但更重要的是,它會讓你和你的團隊在建構 React 應用程式時掉入「成功的陷阱」(pit of success)。
Next.js 旨在擁有一流的開發人員體驗和許多內建功能,例如:
Next.js 用於數以萬計的面向生產的網站和 Web 應用程序,其中包括許多世界上最大的品牌。
這個免費的互動課程將指導您了解如何開始使用 Next.js。
在本教學中,您將通過建立一個非常簡單的部落格應用程式來學習 Next.js 基礎知識。 這是最終結果的示範:
https://next-learn-starter.vercel.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 瞧瞧吧。
當您訪問 http://localhost:3000 時,您應該會看到這樣的頁面。 這是入門模板頁面,其中顯示了有關 Next.js 的一些有用訊息。
接著我們來試著編輯頁面
讓我們嘗試編輯起始頁。
pages/index.js
。<h1>
標籤下找到寫著 “Welcome to” 的文字並將其更改為 “Learn”。保存文件後,瀏覽器會自動使用新文字更新頁面:
Next.js 開發服務器啟用了快速刷新。 當您對文件進行更改時,Next.js 幾乎會立即自動在瀏覽器中套用更改。 無需刷新! 這將幫助您快速迭代您的應用程式。
很好,我們的第一課到此告一段落。
在下一課中,我們將討論建立更多頁面以及如何在頁面之間導航。
註:您應該保持開發服務器運行,但如果要重新啟動它,請按 Ctrl + c 停止服務器。
© Copyrights 從想像到創造. All Rights Reserved.