Next.js之基礎概念

2bdenny 發布于2019-08-20 18:15 / 692人閱讀

摘要：是一個基于實現的服務端渲染框架，地址為。本文先從簡單地基礎概念開始，一步一步帶大家認識。本篇教程到此結束，后面會跟大家介紹的服務端渲染及以及部署相關的一下概念及示例代碼。

Next.js是一個基于React實現的服務端渲染框架，github地址為next.js。

使用Next.js實現服務端渲染是一件非常簡單的事，在這里，你完全可以不用自己去寫webpack等配置，Next.js全都幫你做了。本文先從簡單地基礎概念開始，一步一步帶大家認識Next.js。

先初始化我們的項目目錄結構：

mkdir learn-next
cd learn-next
npm init -y
npm install react react-dom next -S
mkdir pages

可以看到，我們最后一步的時候創建了一個命名為pages的文件夾，這是因為Next.js采用的是文件系統作為API，每一個放在pages中的文件都會映射為一個路由，路由名稱與文件名相同。

打開package.json文件，配置我們的項目啟動命令

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

然后在命令行中啟動我們的項目：

npm run dev

打開http://localhost:3000，可以看到Next.js給我們報了404，這是因為我們還沒寫任何內容。

基礎路由

在pages目錄下新建index.js，輸入以下內容：

export default () => (
    Hello Next.js
)

這時候，我們可以看到Next.js已經把我們的內容渲染出來了，如下所示：

頁面間導航

頁面間跳轉是很正常的事，因此，Next.js為我們準備了Link這個高階組件，用于頁面導航。我們先新建一個about.js文件

export default () => (
    This is about page
)

然后將我們的index.js更改為：

import Link from "next/link"

export default () => (
    
        
            About Page
        
        Hello Next.js
    
)

共用組件

我們的組件不可能都是孤立的，組件間復用是很常見的事，例如頁面的頭部，底部，導航條等等，因此我們可以在根目錄下新建一個components目錄用于存放共用的組件。

新建一個Header.js文件

import Link from "next/link"

const linkStyle = {
  marginRight: 15
}

export default () => (
    
        
          Home
        
        
          About
        
    
)

新建一個Layout.js文件

import Header from "./Header"

const layoutStyle = {
  margin: 20,
  padding: 20,
  border: "1px solid #DDD"
}

export default (props) => (
  
    
    {props.children}
  
)

更改我們的pages/index.js文件

import Layout from "../components/Layout.js"

export default () => (
  
       Hello Next.js
  
)

打開http://localhost:3000，可以看到我們的共用組件生效了：

動態頁面

假設有一個post頁面，該頁面接收一個id，并將該id展示出來，那么怎么做呢。

在pages下新建post.js文件，內容如下:

import Layout from "../components/Layout.js"

export default (props) => (
    
       {props.url.query.id}
       This is the post page.
    
)

如上所示：我們從url.query.id中拿到頁面傳過來的id

那么怎么把id從index頁面傳過去呢，回到pages/index.js頁面，代碼更改如下：

import Layout from "../components/Layout.js"
import Link from "next/link"

const PostLink = (props) => (
  
    
      {props.id}
    
  
)

export default () => (
  
    My Blog
    
      
      
      
    
  
)

在上面的代碼中，我們在Link標簽中使用了as屬性，它的作用是更改路由的名稱，當我們點擊"learn-nextjs"時，我們可以看到，地址欄的地址顯示為http://localhost:3000/p/learn-nextjs

服務端路由

上面的代碼其實是有問題的，這只適合在瀏覽器端進行導航，但是當我們在http://localhost:3000/p/learn-nextjs下刷新頁面時，會看到服務器給我們報了404，因此我們需要同步適配一下服務端的路由。

我們選用express來作為服務端框架，當然你也可以使用koa。

npm install express -S

在根目錄下新建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 = { id: 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)
})

更改package.json中我們的項目啟動方式：

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

這時候刷新頁面，可以看到我們的頁面也被正確渲染了。

本篇教程到此結束，后面會跟大家介紹Next.js的服務端渲染(ssr)及css in js以及部署相關的一下概念及示例代碼。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84252.html

Next.js之基礎概念（二）

摘要：樣式在中寫樣式，一般可以歸為類，一類是基于文件的傳統方式包括，等，另一類則是。我們回到我們的代碼中，更改，代碼如下在標簽中，我們寫我們的，必須包含在中，否則會報錯。至此，的基礎概念已經介紹完了，更高級的用法，可以參考官方的例子。本篇教程基于上一篇的基礎，主要講解服務端渲染，樣式以及部署相關的一些知識，若你沒有看過上一篇的內容，或者你看過又忘了，建議重新去看一遍。順便說一句，Next...

DirtyMind 2019-08-21 12:02 評論0 收藏0
前端每周清單：Node.js 微服務實踐，Vue.js 與 GraphQL，Angular 組件技巧

摘要：前端每周清單第期微服務實踐，與，組件技巧，攻防作者王下邀月熊編輯徐川前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。前端每周清單第 26 期：Node.js 微服務實踐，Vue.js 與 GraphQL，Angular 組件技巧，HeadlessChrome 攻防作者：王下邀月熊編輯：徐川...

wall2flower 2019-08-21 11:55 評論0 收藏0
前端每周清單第 12 期：支付寶前端構建工具發展、LinkedIn用Brotli加快網頁響應速度、餓

摘要：前端每周清單第期支付寶前端構建工具發展用加快網頁響應速度餓了么升級實踐前端前端每周清單前端每周清單專注前端領域內容，分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。前端每周清單第 12 期：支付寶前端構建工具發展、LinkedIn用Brotli加快網頁響應速度、餓了么PWA 升級實踐為InfoQ中文站特供稿件，首發地址為這里；如需轉載，請與InfoQ中文站聯系。從屬于筆...

liuchengxu 2019-08-20 16:23 評論0 收藏0
前端清單第 27 期：React Patent License 回復，Shopify WebVR 購

摘要：新聞熱點國內國外，前端最新動態就開源許可證風波進行回復數周前，基金會決定禁止旗下項目使用，因為其在標準的許可證之外添加了專利聲明此舉引發了社區的廣泛討論，希望能夠更新其開源許可證。 showImg(https://segmentfault.com/img/remote/1460000010777089); 前端每周清單第 27 期：React Patent License 回復，Sho...

jeffrey_up 2019-08-21 12:03 評論0 收藏0
前端每周清單半年盤點之 React 與 ReactNative 篇

摘要：前端每周清單半年盤點之與篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。與求同存異近日，宣布將的構建工具由遷移到，引發了很多開發者的討論。前端每周清單半年盤點之 React 與 ReactNative 篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為...

Barry_Ng 2019-08-22 10:54 評論0 收藏0