Next.js之基础概念

2bdenny 发布于2019-08-20 18:15 / 656人阅读

摘要：是一个基于实现的服务端渲染框架，地址为。本文先从简单地基础概念开始，一步一步带大家认识。本篇教程到此结束，后面会跟大家介绍的服务端渲染及以及部署相关的一下概念及示例代码。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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