Next学习

你猜猜吧
275 阅读7分钟

Next学习笔记整理

Next.js整体介绍

  1. Next是react服务端渲染应用框架，用于构建 SEO 友好的 SPA应用
  2. 支持两种预渲染方式，静态生成和服务端渲染
  3. 基于页面的路由系统，路由零配置
  4. 自动代码拆分，优化页面加载速度
  5. 支持静态导出，可将应用导出为静态网站
  6. 内置 CSS-in-JS 库 （styled-jsx）
  7. 方案成熟，可以用于生产环境
  8. 应用部署简单，拥有专属部署环境 Vercel,也可以部署在其他环境

创建 Next.js项目

  1. 创建：npm init next-app + 项目名称
  2. 运行：npm run dev
  3. 访问：localhost:3000
  4. 执行第一步（创建）的时候每次临时安装 create-next-app 用于创建 Next.js项目，保证每次版本都是最新的

基于页面的路由系统

  1. 在Next.js中，页面是被放置在pages文件中的 React组件
  2. 组件需要被默认导出
  3. 组件文件中不需要引入React
  4. 页面地址与文件地址是对应的关系
// pages/index.js  可以通过 / 访问文件
// pages/list.js   可以通过 /list 访问文件
// page/post/first.js 可以通过 /post/first访问文件

基于页面的路由系统-跳转页面

  1. link组件默认使用JavaScript进行页面跳转，即 SPA 形式的跳转
  2. 如果浏览器中JavaScript 被禁用，则使用链接跳转
  3. Link组件中不应添加除href属性以外的属性，其余属性添加到a标签上
  4. Link组件通过预取（在生产中）功能自动优化应用程序以获得最佳性能,目标页面提前加载
 <Link href="/list"><a title='list page'>list page</a></Link>

Next应用中的静态资源访问

  1. 应用程序根目录中的public文件夹用于提供静态资源
// 通过以下形式进行访问
// public/images/1.jpg -> /images/1.jpg
// public/css/base.css -> /css/base.css

修改页面元数据

  1. 通过 Head 组件修改元数据
  2. import Head from 'next/head'
import Head from 'next/head'

<Head>
      <title>Index Page</title>
      <p>里面还可以写 meta link script等等</p>
</Head>

Next应用中添加样式的方式

css样式

  1. 内置 styled-jsx
  2. 在 Next.js 中内置了 styled-jsx，它是一个CSS-in-JS库，允许在React组件中编写 css，css仅就作用于组件内部
<style jsx>
      {
        ` .demo {
                 color: red;
                 }
        `
      }
</style>

css模块

  1. 通过使用css模块功能，允许将组件的 css 样式编写在单独的 css 文件中
  2. css 模块约定样式文件的名称必须为“组件文件名称.module.css”
// 文件index.module.css
.p { color: green }

// 引入文件
import style from './index.module.css'

<div className={style.p}></div>

全局样式文件

  1. 在pages文件夹中新建_app.js 文件夹并添加如下代码
  2. 在项目根目录创建style 文件夹，并在其中创建global.css
  3. 在_app.js中通过import引入global.css
  4. 重新启动开发服务器
import '../styles/globals.css'

export default function App({Component,pageProps}){
       return <Component {...pageProps} />
}

预渲染介绍

预渲染概述

  1. 预渲染是指数据和HTML的拼接在服务器提前完成
  2. 预渲染可以使 SEO 更加友好
  3. 预渲染回带来更好的用户体验，可以无需运行 JavaScript 即可查看应用程序UI

预渲染的两种形式

  1. 在Next.js 中支持两种形式的预渲染：静态生成和服务器端渲染
  2. 静态生成和服务器渲染是生成 HTML 的时机不同
  3. 静态生成：静态生成是在构建时生成HTML，以后的每个请求都公用构建时生成的HTML
  4. 服务器端渲染：服务器端渲染是在请求时生成HTML,每个请求都会重新生成HTML

两种预渲染方式的选择

  1. Next.js允许每个开发者为每个页面选择不同的预渲染方式，不同的预渲染方式拥有不同的特点，应根据场景就行渲染
  2. 但是大多数页面建议使用静态生成
  3. 静态生成一次构建，反复使用，访问速度快，因为页面都是事先生成好的
  4. 适用场景：营销页面，博客文章，电子商务产品列表，帮助和文档
  5. 服务器渲染访问速度不如静态生成快，但是每次请求都会重新渲染，所以适用数据频繁更新的页面或者页面内容随请求变化而变化的页面

实现静态生成

  1. 无数据和有数据的静态生成
  2. 如果组件不需要在其他地方获取数据，直接进行静态生成
  3. 如果组件需要在其他地方获取数据，在构建时Next.js会预先获取组件需要的数据，然后再对组件进行静态生成
  4. 无数据时无须任何操作，使用默认的静态生成即可
  5. 有数据的静态生成需要使用getStaticProps方法
  6. 该方法是一个异步函数，需要在组件内部进行导出
export async function getStaticProps() {
      // 从文件系统，API，数据库中获取的数据
      const data = bbb

      // props 属性的值将会传递给组件
      return {
            props: aaa
        }
    }

实现服务器端渲染

  1. 服务器端渲染 getServerSideProps
  2. 如果采用服务器端渲染，需要在组件中导出 getServerSideProps方法
 export async function getServerSideProps(context) {
        // context 中会包含特定的请求参数
        return {
            props: {
                // 传递数据给组件
            }
        }
    }

实现基于动态路由的静态生成

基于动态路由的静态生成

  1. 基于参数为页面组件生成HTML页面，有多少参数就生成多少HTML页面
  2. 在构建应用时，先获取用户可以访问的所有路由参数，在根据路由参数获取具体数据，然后根据数据产生静态HTML

实现基于动态路由的静态生成

  1. 创建基于动态路由的页面组件文件，命名时在文件名称外面加上[]，比如[id].js
  2. 导出异步函数 getStaticPaths , 用于获取所有用户可以访问的路由参数
  3. 导出异步函数 getStaticProps , 用于根据路由参数获取具体的数据
  4. getStaticPaths和getStaticProps只运行在服务器端，永远不会运行在客户端，甚至不会被打包到客服端JavaScript中，意味着这里可以随意写服务端代码，比如查询数据库
export async function getStaticPaths() {
        // 此处获取所有用户可以访问的路由参数
        return {
            // 返回固定格式的路由参数
            paths: [{
                params: {
                    id: 1
                }
            }, {
                params: {
                    id: 2
                }
            }],
            // 当用户访问的路由参数没有在当前函数中返回时，是否显示404页面，false显示，true不显示
            fallback: false
        }
    }

    export async function getStaticProps({
        params
    }) {
        // params -> {id:1}
        // 此处根据路由参数获取具体数据
        return {
            props: {}
        }
    }

fallback选项的作用

  1. 参数不在范围内fallback为false的时候展示404页面
  2. 参数不在范围内fallback为true的时候去动态生成静态HTML页面

自定义404页面

  1. 要创建自定义404页面，需要在pages文件夹中创建404.js文件
export default function Custom404() {
        return <div > 404 Page Not Found < /div>
    }

API Router

  1. API Routers 可以理解为接口，客户端向服务端发生请求获取数据的接口
  2. Next.js 应用允许 React 开发者编写服务器端代码创建数据接口
  3. 在pages/api文件夹中创建API Routers 文件，比如user.js
  4. 在文件夹默认导出请求处理函数，函数有两个参数，req为请求对象,res为响应对象
  5. 访问API Routers : localhost:3000/api/user
  6. 不要在getStaticPaths或getStaticProps函数中访问API Routers,因为这两个函数就是在服务端运行的，可以直接写服务器代码
  7. 注：当前API Routers 可以接收任何Http 请求方法
export default function (req, res) {
        res.status(200).send({
            id: 1,
            name: "Tom"
        })
    }
avatar
文章
阅读
粉丝