學習 Next.js: 清潔URL的服務器支持

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

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

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

干凈URL的服務器支持

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

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

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

這是因為, 在pages目錄中, 并不存在一個實際的p/my-blog-post模塊文件.

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

設置

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

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

然后通過下面的命令運行我們的示例程序:

npm install
npm run dev

最后通過 http://localhost:3000 訪問Web應用程序.

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

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

首先, 添加 Express 依賴到應用程序:

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"
  }
}

然后, 運行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)在重啟應用程序, 訪問下面的地址:

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

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

URL信息

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


  {props.title}

但是在服務器路由中, 我們得不到這個title, 因為我們只有一個URL中博客的ID, 因此我們使用這個ID作為服務器端查詢串參數(shù).

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

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

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

最后

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

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

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

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

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

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

摘要：原始文檔在現(xiàn)在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創(chuàng)建動態(tài)內(nèi)容學習使用路由掩碼創(chuàng)建干凈的學習干凈的服務器支持學習獲取數(shù)據(jù)學習部署使用路由掩碼創(chuàng)建干凈的在前面的課程中我們學到了如何使用查詢串創(chuàng)建動態(tài)頁面一次為基礎我們一篇博客的原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學習 Next.js: 入門學習 Next.js: ...

silenceboy 2019-08-20 16:56 評論0 收藏0
學習 Next.js: 創(chuàng)建動態(tài)內(nèi)容

摘要：原始文檔在現(xiàn)在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創(chuàng)建動態(tài)內(nèi)容學習使用路由掩碼創(chuàng)建干凈的學習干凈的服務器支持學習獲取數(shù)據(jù)學習部署創(chuàng)建動態(tài)頁面現(xiàn)在我們知道了如何使用多個頁面創(chuàng)建一個基本的應用程序為了創(chuàng)建頁面我們需要在磁盤上創(chuàng)建原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學習 Next.js: 入門學習 Next.js: ...

caohaoyu 2019-08-20 16:56 評論0 收藏0
學習 Next.js: 入門

摘要：原始文檔在現(xiàn)在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創(chuàng)建動態(tài)內(nèi)容學習使用路由掩碼創(chuàng)建干凈的學習干凈的服務器支持學習獲取數(shù)據(jù)學習部署哪位分高的幫忙創(chuàng)建一個的標簽謝謝現(xiàn)暫時放在標簽下面了新建文章有時間限制一會全部發(fā)上來這是最近兩天原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學習 Next.js: 入門學習 Next.js: ...

Miracle 2019-08-20 16:54 評論0 收藏0
學習 Next.js: 頁面之間的導航

摘要：原始文檔在現(xiàn)在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創(chuàng)建動態(tài)內(nèi)容學習使用路由掩碼創(chuàng)建干凈的學習干凈的服務器支持學習獲取數(shù)據(jù)學習部署頁面之間的導航現(xiàn)在我們知道了如何創(chuàng)建一個應用程序并且運行它我們的示例應用程序只有一個簡單的頁面但原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學習 Next.js: 入門學習 Next.js: ...

layman 2019-08-20 16:54 評論0 收藏0
學習 Next.js: 使用共享組件

摘要：原始文檔在現(xiàn)在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創(chuàng)建動態(tài)內(nèi)容學習使用路由掩碼創(chuàng)建干凈的學習干凈的服務器支持學習獲取數(shù)據(jù)學習部署使用共享組件我們知道是和頁面相關的通過導出一個組件創(chuàng)建一個頁面然后把它放到目錄中基于這個文件名存原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學習 Next.js: 入門學習 Next.js: ...

Steve_Wang_ 2019-08-20 16:56 評論0 收藏0