Next.js入門

Next.js是一個非常流行的Node.js框架,它可以輕鬆實現服務器端React渲染,並提供許多其他令人驚奇的功能

介紹

在現代工作JavaScript由應用程序提供支持反應很棒,直到您意識到與在客戶端呈現所有內容有關的幾個問題。

首先,頁面花了更長的時間才對用戶可見,因為在加載內容之前,所有JavaScript都必須加載,並且您的應用程序需要運行才能確定在頁面上顯示的內容。

其次,如果您要建立一個公開可用的網站,則存在內容SEO問題。搜索引擎在運行和索引JavaScript應用方面越來越好,但是如果我們可以向他們發送內容而不是讓他們弄清楚它,那就更好了。

解決這兩個問題的方法是服務器渲染, 也被稱為靜態預渲染

Next.js是一個React框架,可以非常簡單地完成所有這些工作,但不僅限於此。它的創作者將其廣告宣傳為用於React應用的零配置,單命令工具鏈

它提供了一種通用結構,可讓您輕鬆構建前端React應用程序,並為您透明地處理服務器端渲染。

主要特點

這是Next.js主要功能的詳盡列表:

  • 熱門代碼重裝:Next.js在檢測到任何保存到磁盤的更改時會重新加載頁面。
  • 自動路由:任何URL都映射到文件系統,也映射到放置在pages文件夾,並且不需要任何配置(當然,您可以使用自定義選項)。
  • 單個文件組件: 使用樣式的jsx,由同一團隊完全集成在一起,因此添加範圍限定到組件的樣式很簡單。
  • 服務器渲染:您可以(可選)在將HTML發送給客戶端之前在服務器端呈現React組件。
  • 生態系統兼容性:Next.js在其餘的JavaScript,Node和React生態系統中表現良好。
  • 自動代碼分割:僅使用所需的庫和JavaScript呈現頁面,僅此而已。
  • 預取: 這Link組件,用於將不同的頁面鏈接在一起,支持prefetch在後台自動預取頁面資源(包括由於代碼拆分而丟失的代碼)的prop。
  • 動態組件:您可以動態導入JavaScript模塊和React組件(https://github.com/zeit/next.js#dynamic-import)。
  • 靜態出口: 使用next export命令,Next.js允許您從應用程序中導出一個完全靜態的網站。

安裝

Next.js支持所有主要平台:Linux,macOS,Windows。

輕鬆啟動Next.js項目npm

npm install next react react-dom

入門

創建一個package.json包含以下內容的文件:

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

如果現在運行此命令:

npm run dev

該腳本會引發一個錯誤,抱怨找不到該腳本。pages文件夾。這是Next.js唯一需要運行的東西。

創建一個空的pages文件夾,然後再次運行命令,Next.js將在以下位置啟動服務器localhost:3000

如果您現在轉到該URL,則會看到一個友好的404頁面,它的外觀簡潔漂亮。

A 404 page returned by Next.js

Next.js也可以處理其他錯誤類型,例如500個錯誤。

創建一個頁面

在裡面pages文件夾創建一個index.js一個簡單的React功能組件的文件:

export default () => (
  <div>
    <p>Hello World!</p>
  </div>
)

如果您訪問localhost:3000,此組件將自動呈現。

為什麼這麼簡單?

Next.js使用基於文件系統結構的聲明性頁面結構。

頁面位於pages文件夾,頁面URL由頁面文件名確定。文件系統是頁面API。

服務器端渲染

打開頁面源,View -> Developer -> View Source使用Chrome。

如您所見,組件生成的HTML直接在頁面源中發送。它不是在客戶端呈現的,而是在服務器上呈現的。

Next.js團隊希望為服務器呈現的頁面創建開發人員體驗,類似於創建基本PHP項目時獲得的頁面,例如,在其中放置PHP文件並對其進行調用,然後將它們顯示為頁面。在內部,這當然是非常不同的,但是明顯的易用性是顯而易見的。

添加第二頁

讓我們在其中創建另一個頁面pages/contact.js

export default () => (
  <div>
    <p>
      <a href='mailto:[email protected]'>Contact us!</a>
    </p>
  </div>
)

如果您將瀏覽器指向localhost:3000/contact此頁面將被呈現。如您所見,此頁面也是服務器渲染的。

熱裝

請注意,您不必重新啟動npm加載第二頁的過程。 Next.js在後台為您完成此任務。

客戶端渲染

由於上面提到的所有原因,服務器呈現在第一次加載頁面時非常方便,但是在網站內部導航時,客戶端呈現是加快頁面加載和改善用戶體驗的關鍵。

Next.js提供了一個Link可用於構建鏈接的組件。嘗試鏈接上面的兩個頁面。

改變index.js這段代碼:

import Link from 'next/link'

export default () => ( <div> <p>Hello World!</p> <Link href=’/contact’> <a>Contact me!</a> </Link> </div> )

現在返回瀏覽器並嘗試此鏈接。如您所見,“聯繫人”頁面將立即加載,而不會刷新頁面。

這是客戶端導航正常工作,並完全支持歷史API,這意味著您的用戶後退按鈕不會損壞。

如果你現在cmd-click鏈接後,將在新選項卡中打開相同的“聯繫人”頁面,現在服務器已呈現。

動態頁面

Next.js的一個很好的用例是一個博客,因為它是所有開發人員都知道的工作原理,並且非常適合作為一個簡單的示例來處理動態頁面。

動態頁面是沒有固定內容的頁面,而是根據某些參數顯示一些數據。

改變index.js

import Link from 'next/link'

const Post = (props) => ( <li> <Link href={/post?title=</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">title</span><span style="color:#e6db74">}</span><span style="color:#e6db74">}> <a>{props.title}</a> </Link> </li> )

export default () => ( <div> <h2>My blog</h2> <ul> <li> <Post title=‘Yet another post’ /> <Post title=‘Second post’ /> <Post title=‘Hello, world!’ /> </li> </ul> </div> )

這將創建一系列帖子,並用帖子標題填充title查詢參數:

The posts list

現在創建一個post.js文件在pages文件夾,然後添加:

export default (props) => <h1>{props.url.query.title}</h1>

現在單擊單個帖子將在h1標籤:

A single post

您可以使用不帶查詢參數的干淨URL。 Next.js鏈接組件通過接受一個as屬性,您可以使用它傳遞一個子彈:

import Link from 'next/link'

const Post = (props) => ( <li> <Link as={/</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">slug</span><span style="color:#e6db74">}</span><span style="color:#e6db74">} href={/post?title=</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">title</span><span style="color:#e6db74">}</span><span style="color:#e6db74">}> <a>{props.title}</a> </Link> </li> )

export default () => ( <div> <h2>My blog</h2> <ul> <li> <Post slug=‘yet-another-post’ title=‘Yet another post’ /> <Post slug=‘second-post’ title=‘Second post’ /> <Post slug=‘hello-world’ title=‘Hello, world!’ /> </li> </ul> </div> )

CSS-in-JS

默認情況下,Next.js支持樣式的jsx,這是同一開發團隊提供的CSS-in-JS解決方案,但是您可以使用喜歡的任何庫,例如樣式化的組件

例子:

export default () => (
  <div>
    <p>
      <a href='mailto:[email protected]'>Contact us!</a>
    </p>
    <style jsx>{`
      p {
        font-family: 'Courier New';
      }
      a {
        text-decoration: none;
        color: black;
      }
      a:hover {
        opacity: 0.8;
      }
    `}</style>
  </div>
)

樣式是組件的作用域,但是您也可以編輯全局樣式,添加globalstyle元素:

export default () => (
  <div>
    <p>
      <a href='mailto:[email protected]'>Contact us!</a>
    </p>
    <style jsx global>{`
      body {
        font-family: 'Benton Sans', 'Helvetica Neue';
        margin: 2em;
      }
      h2 {
        font-style: italic;
        color: #373fff;
      }
    `}</style>
  </div>
)

導出靜態站點

Next.js應用程序可以輕鬆導出為靜態站點,可以將其部署在超快速靜態站點主機之一上,例如Netlify或者Firebase託管,而無需設置Node環境。

該過程要求您聲明構成網站的URL,但這是一個簡單的過程

部署中

無需最終版本中不需要的源映射或其他開發工具,即可輕鬆地創建應用程序的生產就緒副本。

在本教程開始時,您創建了一個package.json包含以下內容的文件:

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

這是使用以下方法啟動開發服務器的方法npm run dev

現在,只需將以下內容添加到package.json反而:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

並通過運行來準備您的應用npm run buildnpm run start

現在

Zeit現在被稱為威賽爾,而本教程可能已過時

Next.js背後的公司為Node.js應用程序提供了很棒的託管服務,稱為現在

當然,他們將兩個產品都集成在一起,因此您可以無縫部署Next.js應用程序,一旦您現在安裝,通過運行now應用程序文件夾中的命令。

幕後現在為您設置服務器,您無需擔心任何事情,只需等待應用程序URL就緒即可。

區域

您可以設置多個Next.js實例以偵聽不同的URL,但是外部用戶的應用程序看起來像是由一台服務器提供動力:https://github.com/zeit/next.js/#multi-zones

外掛程式

Next.js的插件列表位於https://github.com/zeit/next-plugins

小故障入門套件

如果您想嘗試,建議您使用Glitch。看看我的Next.js小故障入門套件

閱讀更多關於Next.js的信息

我可能無法描述這個出色框架的所有功能,而主要閱讀Next.js的主要地方是GitHub上的項目自述文件

免費下載我的Next.js手冊


接下來的更多教程: