React.js 是現今前端最火的應用框架之一，而?**Next.js 正是 React.js 領域最優秀的服務端渲染框架之一。**基本上，現在所有的前端主流形式，從服務端渲染 APP，靜態站到桌面應用等，Next.js 都能勝任。

不論是國內還是國外，都有不少開發者和企業在使用 Next.js 開發網站，比如：

• 騰訊新聞移動端門口站騰訊網
• 大名頂頂的Hulu 視頻站
• 世界最受歡迎的 React UI 組件庫Material-UI
• 魅族官網首頁魅族

今天帶來一門完整的 Next.js 框架實戰課程，作者 luffyZh 老師是網易的高級前端開發工程師，手把手帶你逐步掌握 Next.js 框架，最終完成靜態博客+全棧動態博客系統的搭建。

最終項目效果：

• 個人靜態博客系統

• 全棧動態博客系統

如果你是 React.js 開發者并且想學習一個服務端渲染框架，那么本課程是你很好的選擇。

課程分為三個階段：

一：了解服務端渲染并且初步認識 Next.js，學習使用 Next.js 的各種 API 以及內置約束規則，進行簡單的頁面開發；

二：學習用多種方式部署 Next.js 應用，滿足小型個人和大型企業的各種業務場景；

三：從實踐角度出發使用 Next.js 開發兩個應用系統，第一個是靜態個人博客系統，第二個是全棧開發包含前后端以及數據庫的動態博客系統。

課程地址：Next.js 輕量級 React 框架實戰

歡迎打開瀏覽器進入學習環境，邊敲代碼邊練習～下面是課程內容：

什么是 Next.js

熟悉一門新的技術，最簡單的途徑就是去它的官網閱讀文檔，官網地址：Next.js。

Next.js 官方對于自身的介紹可以說是毫不謙虛：

The React Framework for Server-Render APP, Static Websites, SEO-Friendly Sites, the DeskTop, Electron, the PWA…

基本上現今前端主流形式，從服務端渲染 APP，靜態站到桌面應用等，Next.js 都能勝任。

Next.js 案例

盡管 Next.js 官網說的天花亂墜，那么實際上呢？有很多開發者在用 Next.js 做項目進行網站開發嗎？來看看有哪些著名的網站使用 Next.js 來進行開發的。

• 大名頂頂的Hulu 視頻站
• 世界最受歡迎的 React UI 組件庫Material-UI
• 騰訊新聞移動端門口站騰訊網
• 魅族官網首頁魅族

魅族官網只有首頁采用了 Next.js，其他頁面都是另行開發的，應該說它只是為了做 SEO 優化，由此可見 Next.js 在 SSR 以及 SEO 領域確實是有它的長處的。

其實還有更多的例子，具體可見Next.js Showcase。

Next.js 站特征

從上面幾個例子可以看出，很多知名網站都是采用 Next.js 來進行開發的。可能有些人會問了，你說是 Next.js 開發的就是 Next.js 開發的？怎么才能識別出來一個網站是否是使用 Next.js 來進行開發的呢？一般來說可以通過如下幾個特征來判斷一個網站是否是由 Next.js 來進行開發的：

• 頁面 標簽內部會有一個 的元素 —— 最主要特征。
• 頁面可能會存在一個 的標簽。
• 頁面 內部可能會存在 0 ～ 多個 標簽。

就以騰訊門戶來檢驗一下，其他幾個站點大家可以自行驗證：

第一個 Next.js 應用 —— Hello Next.js

上面介紹了這么多，大家應該基本了解了 Next.js 是什么以及 Next.js 的一些優點。學習一門技術，必須要知道它是什么并且了解到為什么要使用它，才能更有興趣的去學習并掌握它。

接下來就通過一個 Next.js 的 Demo 開始 Next.js 開發的入門之旅。來實際動手寫一個任何語言都通用的入門級 Demo —— Hello World。

相關命令大家可以在實驗樓相應環境中執行。

第一步：新建文件夾 hello-next
第二步：創建 package.json 文件

在根目錄執行 npm init 命令，之后按照提示一路確認即可。

如果不喜歡復雜步驟，可以直接在 hello-next 目錄下新建 package.json 文件，然后將下面的內容拷貝進去：

{"name": "hello-next","version": "1.0.0","description": "The first demo of Next.js.","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": ["next.js"],"author": "luffyZh","license": "ISC" }

第三步：安裝依賴

Next.js 是一個 React.js 框架，所以一般除了安裝 Next.js 之外，還要安裝 React.js 相關核心依賴。

為了避免下載太慢，可以安裝并設置淘寶鏡像。

npm install -g cnpm --registry=https://registry.npm.taobao.org npm config set registry https://registry.npm.taobao.org

然后安裝 React.js 相關核心依賴。

// 執行如下命令 npm install --save next react react-dom

安裝完之后，修改 package.json 文件增加一條啟動命令 “start”: “next -p 8080”，它幫助我們啟動 Next.js 的開發環境在 8080 端口進行訪問。現在package.json 代碼如下：

{"name": "hello-next","version": "1.0.0","description": "The first demo of Next.js.","main": "index.js","scripts": {"start": "next -p 8080","test": "echo \"Error: no test specified\" && exit 1"},"keywords": ["next.js"],"author": "luffyZh","license": "ISC","dependencies": {"next": "^9.1.4","react": "^16.12.0","react-dom": "^16.12.0"} }

第四步：添加入口文件

Next.js 項目啟動需要入口文件，Next.js 會默認把根目錄的 pages 文件夾里面的.js文件解析成路由頁，在 hello-next 目錄下新建 pages/index.js 文件并寫入如下內容：

什么是路由頁后面課程會詳細介紹。

// pages/index.jsexport default () => <h1>Hello Next.js</h1>;

使用 npm start 命令進行啟動，如果你看到控制臺輸出下面這段話就表示啟動成功了：

[ ready ] compiled successfully - ready on http://localhost:8080

點擊右邊工具欄 Web服務，會自動新開一個標簽進入瀏覽器，顯示的內容為Hello Next.js：

如果你是在本地創建的文件，則在瀏覽器訪問地址 localhost:8080 即可。

本節實驗只是為了讓大家理解 Next.js，后續課程無需手動進行項目的初始化搭建。也可以選擇一個更簡單的方式來搭建 Next.js 應用并啟動，即使用命令 npx create-next-app hello-next 進行快速搭建。

大家可以將本環境保存下來，接下來的實驗也會使用到這個環境。本部分代碼可以通過如下命令獲取：

wget https://labfile.oss.aliyuncs.com/courses/1546/code3_hello-next.zip

篇幅有限，后續的課程內容，請進入課程《Next.js 輕量級 React 框架實戰》邊敲代碼邊學習～

總結

以上是生活随笔為你收集整理的前端教程丨手把手教你用 Next.js 搭建个人博客，从入门到吃鸡的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。