學習 Next.js: 入門

原始文檔在 https://github.com/developerw... 如今搬過來.

學習 Next.js: 入門
學習 Next.js: 頁面之間的導航
學習 Next.js: 使用共享組件
學習 Next.js: 建立動態內容
學習 Next.js: 使用路由掩碼建立乾淨的URL
學習 Next.js: 乾淨URL的服務器支持
學習 Next.js: 獲取數據
學習 Next.js: 部署

哪位分高的,幫忙建立一個 Next.js 的標籤, 謝謝. 現暫時放在reactjs標籤下面了. 新建文章有時間限制, 一會所有發上來, 這是最近兩天翻譯的 Next.js 學習資料, 原始文章在 http://learnnextjs.com

入門

建立一個單頁Javascript應用程序是一件很是有挑戰的事情, 幸運的是, 開源世界給咱們提供了一些好用的工具來簡化, 加速單頁應用的開發.

Create React App 就是這樣一種工具.

即便是這樣, 建立單頁應用有很是高的學習曲線. 仍然須要咱們學習客戶端路由, 頁面佈局, 等技術. 若是你還想要運行服務器端渲染(SSR: Server Side Rendering), 事情就變得更加困難了.

所以, 咱們須要一個簡單而且可自定義的方案

想一下咱們如何使用PHP建立Web應用程序. 首先建立一些文件, 編寫PHP代碼, 而後部署. 不用擔憂路由的問題, Web應用程序只是在服務器端運行, 而且輸出HTML而已.

但這裏咱們說的不是用PHP來建立Web應用程序, 咱們使用Javascript和React, 使用Next.js框架給咱們提供能力:

• 服務器端渲染(默認)
• 自動代碼切分, 加速頁面加載
• 簡單的客戶端路由(基於頁面)
• 基於Webpack的開發環境, 支持熱模塊替換(HMR: Hot Module Replacement)
• 可使用Express 或其餘Node.js服務器實現
• 使用Babel和Webpack配置定製

設置

Next.js 能夠在Windows, Mac和Linux運行. 只須要在系統中安裝Node.js便可開始構建Next.js應用程序.

除了須要一個文本編輯器編寫代碼, 一個終端調用命令以外, 沒什麼別的是必須的.

若是在Windows上運行, 建議使用 PowerShell. Next.js能夠工做在任何Shell和終端下. 可是本指南中, 咱們使用UNIX相關的命令.
推薦在 Windows 下使用 PowerShell, 讓工做方便一些.

運行下面的命令, 建立一個示例項目:

mkdir hello-next
cd hello-next
npm init -y
npm install --save react react-dom next
mkdir pages

而後打開package.json, 添加下面的NPM腳本命令:

{
  "scripts": {
    "dev": "next"
  }
}

如今, 一切就準備好了, 你能夠運行下面的命令來啓動開發服務器了.

npm run dev

在瀏覽其中打開: http://localhost:3000.

404 頁面

打開 http://localhost:3000, 咱們看到的是一個 404 頁面. 這個時候 Next.js 沒有任何功能. 默認就是一個 404 頁面.

建立第一個頁面

如今咱們來建立第一個頁面. 在 pages 目錄下建立一個名稱爲 index.js 的文件, 內容以下:

const Index = () => {
  return (
    <div>
      <p>Hell Next.js</p>
    </div>
  )
}
export default Index

或者

const Index = () => (
  <div>
    <p>Hell Next.js</p>
  </div>
)

export default Index

如今, 再次訪問 http://localhost:3000, 在頁面上你會看到 "Hello Next.js". 這裏, 咱們只是從 pages/index.js 模塊導出了一個簡單的 React 組件. 同理, 能夠編寫你本身的模塊而且導出它.

確保你的 React 組件爲默認導出
譯註: (default關鍵字)

如今, 咱們在Index頁故意引入一個語法錯誤(刪除尾部的</p>HTML標籤), 以下:

const Index = () => (
  <div>
    <p>Hello Next.js
  </div>
)

export default Index

頁面將會顯示一個語法錯誤 There's an error showing the syntax error.

錯誤處理

默認狀況, Next.js 會在瀏覽器中直接顯示這些錯誤信息, 這方便你識別錯誤而且快速的搞定它.

你但你解決了這些錯誤, 頁面會執行一個無刷新的更新. 這得益於Webpack提供的熱模塊替換功能, 在Next.js它是默認支持的.

你太棒了

看起來你已經構建了第一個Next.js應用程序. 有什麼想法? 若是你喜歡, 能夠進一步深刻下去.

Bugfix

2017-10-11: 修復以下問題

Index(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.