Next.js之基礎概念

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以及部署相關的一下概念及示例代碼。