學(xué)習(xí) Next.js: 清潔URL的服務(wù)器支持

Lionad-Morotar 發(fā)布于2019-08-20 16:56 / 1891人閱讀

摘要：原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署干凈的服務(wù)器支持在前面的課程中我們學(xué)習(xí)了如何為我們的應(yīng)用程序創(chuàng)建干凈的基本上我們讓像這樣但是

原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來.
學(xué)習(xí) Next.js: 入門
學(xué)習(xí) Next.js: 頁面之間的導(dǎo)航
學(xué)習(xí) Next.js: 使用共享組件
學(xué)習(xí) Next.js: 創(chuàng)建動態(tài)內(nèi)容
學(xué)習(xí) Next.js: 使用路由掩碼創(chuàng)建干凈的URL
學(xué)習(xí) Next.js: 干凈URL的服務(wù)器支持
學(xué)習(xí) Next.js: 獲取數(shù)據(jù)
學(xué)習(xí) Next.js: 部署

干凈URL的服務(wù)器支持

在前面的課程中, 我們學(xué)習(xí)了如何為我們的應(yīng)用程序創(chuàng)建干凈的URL. 基本上, 我們讓URL像這樣:

http://localhost:3000/p/my-blog-post

但是, 它現(xiàn)在只能用于客戶端導(dǎo)航. 當(dāng)我們重新加載頁面的時候, 它給了我們一個404錯誤頁面.

這是因?yàn)? 在pages目錄中, 并不存在一個實(shí)際的p/my-blog-post模塊文件.

我們使用Next.js的自定義服務(wù)器API來解決這個問題, 讓我們看看如何使用它?

設(shè)置

首先, 我們需下載示例代碼:

git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout clean-urls

然后通過下面的命令運(yùn)行我們的示例程序:

npm install
npm run dev

最后通過 http://localhost:3000 訪問Web應(yīng)用程序.

創(chuàng)建自定義服務(wù)器

我們使用 Express 來創(chuàng)建一個自定義服務(wù)器. 它非常簡單:

首先, 添加 Express 依賴到應(yīng)用程序:

npm install --save express

然后創(chuàng)建一個 server.js 文件, 并添加下面的內(nèi)容:

const express = require("express")
const next = require("next")

const dev = process.env.NODE_ENV !== "production"
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare()
.then(() => {
  const server = express()

  server.get("*", (req, res) => {
    return handle(req, res)
  })

  server.listen(3000, (err) => {
    if (err) throw err
    console.log("> Ready on http://localhost:3000")
  })
})
.catch((ex) => {
  console.error(ex.stack)
  process.exit(1)
})

現(xiàn)在, 更新NPM的開發(fā)腳本為:

{
  "scripts": {
    "dev": "node server.js"
  }
}

然后, 運(yùn)行npm run dev, 你會看到什么?

創(chuàng)建自定義路由

現(xiàn)在你所看到的, Next.js 可以和 Express 一起協(xié)同工作. 現(xiàn)在我們要添加一個自定義的路由來匹配博客的URL.

用新的路由, server.js 看起來就是這個樣子:

const express = require("express")
const next = require("next")

const dev = process.env.NODE_ENV !== "production"
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare()
.then(() => {
  const server = express()

  server.get("/p/:id", (req, res) => {
    const actualPage = "/post"
    const queryParams = { title: req.params.id }
    app.render(req, res, actualPage, queryParams)
  })

  server.get("*", (req, res) => {
    return handle(req, res)
  })

  server.listen(3000, (err) => {
    if (err) throw err
    console.log("> Ready on http://localhost:3000")
  })
})
.catch((ex) => {
  console.error(ex.stack)
  process.exit(1)
})

注意一下代碼塊:

server.get("/p/:id", (req, res) => {
    const actualPage = "/post"
    const queryParams = { title: req.params.id }
    app.render(req, res, actualPage, queryParams)
})

我們簡單的映射了一個自定義路由到我們現(xiàn)有的博客頁面 post. 同時我們還映射了查詢串.

現(xiàn)在重啟應(yīng)用程序, 訪問下面的地址:

http://localhost:3000/p/hello-nextjs

現(xiàn)在, 不會再顯示 404 頁面了, 因?yàn)? 通過自定義路由, 我們把通過瀏覽器訪問的地址映射到了實(shí)際的頁面, 但是現(xiàn)在還有一個小問題, 你能看出來么?

URL信息

我們的 /post 頁面通過查詢串參數(shù) title 來接收標(biāo)題. 在客戶端路由中, 我們可以通過 Link 的 as 屬性設(shè)置正確的值.


  {props.title}

但是在服務(wù)器路由中, 我們得不到這個title, 因?yàn)槲覀冎挥幸粋€URL中博客的ID, 因此我們使用這個ID作為服務(wù)器端查詢串參數(shù).

你可以通過如下的路由定義看到:

server.get("/p/:id", (req, res) => {
  const actualPage = "/post"
  const queryParams = { title: req.params.id }
  app.render(req, res, actualPage, queryParams)
})

這就是問題. 但是在實(shí)際應(yīng)用中, 這實(shí)際上不是一個問題, 因?yàn)? 通常我們在服務(wù)器端和客戶端都通過ID從數(shù)據(jù)服務(wù)器獲取數(shù)據(jù). 因此實(shí)際上, 我們只需要一個ID.

最后

現(xiàn)在我們通過 Next.js 自定義服務(wù)器API 實(shí)現(xiàn)了一個簡單的應(yīng)用程序. 以此為基礎(chǔ), 我們添加了干凈URL的服務(wù)器端支持. 就像這樣, 你可以創(chuàng)建更多你想要的路由.

對于Web服務(wù)器, 不限于使用 Express 作為服務(wù)器, 你可以使用任何 Node.js Web框架. 對于自定義服務(wù)器API的想信息文檔, 參考定義服務(wù)器API文檔

GPU云服務(wù)器云服務(wù)器 next.js next.js 樣式 Next.js 12 正式發(fā)布、Yarn cdn支持url

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/83271.html

發(fā)表評論

登陸后可評論

0條評論

Lionad-Morotar

男|高級講師

我要關(guān)注我要私信

TA的文章

關(guān)于c++的namespace，你真的了解嗎？真的會用嗎？

閱讀 1322·2021-11-25 09:43
傲游主機(jī)：雙十一優(yōu)惠，VPS全場75折優(yōu)惠，多國直連機(jī)房，充1111送511，安穩(wěn)做站必選

閱讀 2037·2021-11-11 10:58
CloudPowerall：洛杉磯CN2 GIA云服務(wù)器$36.99/年起，洛杉磯聯(lián)通高級版(AS9

閱讀 1383·2021-11-08 13:18
前端每日實(shí)戰(zhàn)：110# 視頻演示如何用純 CSS 創(chuàng)作一只憤怒小鳥中的黑炮

閱讀 2831·2019-08-29 16:25
新手flex布局入門篇，看這篇文章就夠了

閱讀 3590·2019-08-29 12:51
用css繪制各種形狀

閱讀 3398·2019-08-29 12:30
給零基礎(chǔ)的小白從0到1的react-naitve電商app——簡單易學(xué)！

閱讀 819·2019-08-26 13:24
React系列 --- 從Mixin到HOC再到HOOKS(四)

閱讀 3761·2019-08-26 10:38

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

學(xué)習(xí) Next.js: 清潔URL的服務(wù)器支持

相關(guān)文章

***學(xué)習(xí)* Next.js: 使用路由掩碼創(chuàng)建干凈的*URL***

學(xué)習(xí) Next.js: 創(chuàng)建動態(tài)內(nèi)容

學(xué)習(xí) Next.js: 入門

學(xué)習(xí) Next.js: 頁面之間的導(dǎo)航

學(xué)習(xí) Next.js: 使用共享組件

發(fā)表評論

0條評論

Lionad-Morotar

男|高級講師

TA的文章

關(guān)于c++的namespace，你真的了解嗎？真的會用嗎？

傲游主機(jī)：雙十一優(yōu)惠，VPS全場75折優(yōu)惠，多國直連機(jī)房，充1111送511，安穩(wěn)做站必選

CloudPowerall：洛杉磯CN2 GIA云服務(wù)器$36.99/年起，洛杉磯聯(lián)通高級版(AS9

前端每日實(shí)戰(zhàn)：110# 視頻演示如何用純 CSS 創(chuàng)作一只憤怒小鳥中的黑炮

新手flex布局入門篇，看這篇文章就夠了

用css繪制各種形狀

給零基礎(chǔ)的小白從0到1的react-naitve電商app——簡單易學(xué)！

React系列 --- 從Mixin到HOC再到HOOKS(四)

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

學(xué)習(xí) Next.js: 清潔URL的服務(wù)器支持

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！