Next.js之基础概念

18

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 () => (
    <h1>Hello Next.js</h1>
)

这时候,我们可以看到Next.js已经把我们的内容渲染出来了,如下所示:

图片描述

页面间导航

页面间跳转是很正常的事,因此,Next.js为我们准备了Link这个高阶组件,用于页面导航。我们先新建一个about.js文件

export default () => (
    <h1>This is about page</h1>
)

然后将我们的index.js更改为:

import Link from 'next/link'

export default () => (
    <div>
        <Link href="/about" >
            <a>About Page</a>
        </Link>
        <h1>Hello Next.js</h1>
    </div>
)

共用组件

我们的组件不可能都是孤立的,组件间复用是很常见的事,例如页面的头部,底部,导航条等等,因此我们可以在根目录下新建一个components目录用于存放共用的组件。

新建一个Header.js文件

import Link from 'next/link'

const linkStyle = {
  marginRight: 15
}

export default () => (
    <div>
        <Link href="/">
          <a style={linkStyle}>Home</a>
        </Link>
        <Link href="/about">
          <a style={linkStyle}>About</a>
        </Link>
    </div>
)

新建一个Layout.js文件

import Header from './Header'

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

export default (props) => (
  <div style={layoutStyle}>
    <Header />
    {props.children}
  </div>
)

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

import Layout from '../components/Layout.js'

export default () => (
  <Layout>
       <h1>Hello Next.js</h1>
  </Layout>
)

打开http://localhost:3000,可以看到我们的共用组件生效了:

图片描述

动态页面

假设有一个post页面,该页面接收一个id,并将该id展示出来,那么怎么做呢。

在pages下新建post.js文件,内容如下:

import Layout from '../components/Layout.js'

export default (props) => (
    <Layout>
       <h1>{props.url.query.id}</h1>
       <p>This is the post page.</p>
    </Layout>
)

如上所示:我们从url.query.id中拿到页面传过来的id

那么怎么把id从index页面传过去呢,回到pages/index.js页面,代码更改如下:

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

const PostLink = (props) => (
  <li>
    <Link as={`/p/${props.id}`}  href={`/post?id=${props.id}`}>
      <a>{props.id}</a>
    </Link>
  </li>
)

export default () => (
  <Layout>
    <h1>My Blog</h1>
    <ul>
      <PostLink id="hello-nextjs" />
      <PostLink id="learn-nextjs" />
      <PostLink id="deploy-nextjs" />
    </ul>
  </Layout>
)

在上面的代码中,我们在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以及部署相关的一下概念及示例代码。

你可能感兴趣的

李隆熙 · 2017年07月27日

您好,我用next.js初始化项目一直报错。不知是什么原因。谢谢!
ERROR Failed to compile with 2 errors

These modules were not found:

../../../../.2.4.8@next/dist/lib/error.js in ./~/.2.4.8@next/dist/pages/_error.js?entry
../../../../.2.4.8@next/dist/server/document.js in ./~/.2.4.8@next/dist/pages/_document.js?entry

回复

0

pages文件夹长的页面名称是next.js默认的路由,你的pages文件夹可能写的有问题

Nunu_Willump · 2018年11月08日
我是M大 · 2018年08月01日

为啥 http://localhost:3000 跳转到 http://localhost:3000/p/hello-nextjs 时没问题 但http://localhost:3000/p/hello-nextjs 直接打开就404啊

回复

0

因为你这个是前端路由,当你直接打开该路由或者刷新这一页,访问该路由在服务端实际是不存在的,需要在服务端进行调整。

Nunu_Willump · 2018年11月08日
载入中...