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
熟悉一門新的技術，最簡單的途徑就是去它的官網閱讀文檔，官網地址：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.js
export 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 框架實戰》邊敲代碼邊學習～