Next.js之基礎(chǔ)概念

2bdenny 發(fā)布于2019-08-20 18:15 / 696人閱讀

摘要：是一個(gè)基于實(shí)現(xiàn)的服務(wù)端渲染框架，地址為。本文先從簡單地基礎(chǔ)概念開始，一步一步帶大家認(rèn)識(shí)。本篇教程到此結(jié)束，后面會(huì)跟大家介紹的服務(wù)端渲染及以及部署相關(guān)的一下概念及示例代碼。

Next.js是一個(gè)基于React實(shí)現(xiàn)的服務(wù)端渲染框架，github地址為next.js。

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

先初始化我們的項(xiàng)目目錄結(jié)構(gòu)：

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

可以看到，我們最后一步的時(shí)候創(chuàng)建了一個(gè)命名為pages的文件夾，這是因?yàn)镹ext.js采用的是文件系統(tǒng)作為API，每一個(gè)放在pages中的文件都會(huì)映射為一個(gè)路由，路由名稱與文件名相同。

打開package.json文件，配置我們的項(xiàng)目啟動(dòng)命令

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

然后在命令行中啟動(dòng)我們的項(xiàng)目：

npm run dev

打開http://localhost:3000，可以看到Next.js給我們報(bào)了404，這是因?yàn)槲覀冞€沒寫任何內(nèi)容。

基礎(chǔ)路由

在pages目錄下新建index.js，輸入以下內(nèi)容：

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

這時(shí)候，我們可以看到Next.js已經(jīng)把我們的內(nèi)容渲染出來了，如下所示：

頁面間導(dǎo)航

頁面間跳轉(zhuǎn)是很正常的事，因此，Next.js為我們準(zhǔn)備了Link這個(gè)高階組件，用于頁面導(dǎo)航。我們先新建一個(gè)about.js文件

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

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

import Link from "next/link"

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

共用組件

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

新建一個(gè)Header.js文件

import Link from "next/link"

const linkStyle = {
  marginRight: 15
}

export default () => (
    
        
          Home
        
        
          About
        
    
)

新建一個(gè)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，可以看到我們的共用組件生效了：

動(dòng)態(tài)頁面

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

在pages下新建post.js文件，內(nèi)容如下:

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

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

如上所示：我們從url.query.id中拿到頁面?zhèn)鬟^來的id

那么怎么把id從index頁面?zhèn)鬟^去呢，回到pages/index.js頁面，代碼更改如下：

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

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

export default () => (
  
    My Blog
    
      
      
      
    
  
)

在上面的代碼中，我們?cè)贚ink標(biāo)簽中使用了as屬性，它的作用是更改路由的名稱，當(dāng)我們點(diǎn)擊"learn-nextjs"時(shí)，我們可以看到，地址欄的地址顯示為http://localhost:3000/p/learn-nextjs

服務(wù)端路由

上面的代碼其實(shí)是有問題的，這只適合在瀏覽器端進(jìn)行導(dǎo)航，但是當(dāng)我們?cè)趆ttp://localhost:3000/p/learn-nextjs下刷新頁面時(shí)，會(huì)看到服務(wù)器給我們報(bào)了404，因此我們需要同步適配一下服務(wù)端的路由。

我們選用express來作為服務(wù)端框架，當(dāng)然你也可以使用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中我們的項(xiàng)目啟動(dòng)方式：

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/84252.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

2bdenny

男|高級(jí)講師

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

TA的文章

基于javaweb+jsp的高校科研項(xiàng)目管理系統(tǒng)

閱讀 2418·2021-11-25 09:43
Java零基礎(chǔ)入門筆記｜原來學(xué)Java可以這么簡單

閱讀 1250·2021-11-24 09:39
馬斯克公開支持上班“摸魚”，允許員工坐班聽音樂，還可外放

閱讀 752·2021-11-23 09:51
DediPath宣布已將業(yè)務(wù)擴(kuò)展到亞特蘭大，夏季促銷仍有效，美國便宜服務(wù)器$39/月起

閱讀 2389·2021-09-07 10:18
revenueserver：荷蘭抗投訴vps，不限流量，$7.59/月，1Gbps帶寬，2G內(nèi)存/1

閱讀 1867·2021-09-01 11:39
我的前端編碼習(xí)慣 —— css篇

閱讀 2783·2019-08-30 15:52
css3

閱讀 2598·2019-08-30 14:21
前端每日實(shí)戰(zhàn)：155# 視頻演示如何用純 CSS 創(chuàng)作一只熱氣球

閱讀 2863·2019-08-29 16:57

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Next.js之基礎(chǔ)概念

Hello Next.js

This is about page

Hello Next.js

Hello Next.js

{props.url.query.id}

My Blog

相關(guān)文章