前端教程丨手把手教你用 Next.js 搭建我的博客，從入門到吃雞

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.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 框架實戰》邊敲代碼邊學習～