nextjs概述

前言：nextjs是昨天真正开始了解，之前都是打酱油，原来这个框架是react，路由，参数传递，页面复用，服务端渲染等做得很好。

next.js作为一款轻量级的应用框架，主要用于构建静态网站和后端渲染网站。

框架特点
使用后端渲染
自动进行代码分割（code splitting），以获得更快的网页加载速度
简洁的前端路由实现
使用webpack进行构建，支持模块热更新（Hot Module Replacement）
可与主流Node服务器进行对接（如express）
可自定义babel和webpack的配置

路由
使用nextjs之后，再也无需为配置路由而操心，只需要放到pages文件夹下面,nextjs就自动生成了路由，

只要按文件夹路径去访问即可，例如上图中的my-orders路径，我们可以直接访问http://localhost:3000/my-orders/,根本不用再路由上面花费精力

参数传递
页面之间难免会有参数传递

我们只需要将文件名[参数名]的方式命名即可，接收参数的时候直接const id = router.query.参数名;即可，十分优雅十分简洁。

页面复用
有时候，两个页面布局差不多，可能只有微小区别，这个时候我们可以加一个参数来区分下，比如加一个type参数：

在页面里面获取type类型，生成新的页面路径：

export function getStaticPaths(): GetStaticPathsResult {
  return {
    paths: [
      {
        params: {
          type: "return-product",
        },
      },
      {
        params: {
          type: "report",
        },
      },
    ],
    fallback: false,
  };
}

上面这个例子就会生成两个页面的路由，一个是：http://localhost:3000/my-orders/select-resons/return-product,另一个是：http://localhost:3000/my-orders/select-resons/report,假如我们此处随便输入别的值，会报404

nextjs搭配scss
nextjs如果要用scss的话，需要把scss命名加.module.scss,否则会不识别，引用的时候必须：

import styles from "./BillingForm.module.scss";

<div className={classNames("mx-auto hidden md:block", styles.editButton)}>
    <Link href={pathnames.editBillingDetails}>
    <a>
        <CustomButton primary rounded fullSize noMargin label="EDIT" />
    </a>
    </Link>
</div>

注意：这里不能直接import "./BillingForm.module.scss";,然后className的方式引用scss，会失败，这一点不知道为何要这么设计？好像是为了避免css命名污染问题。

程序入口
nextjs之后程序总入口是_app.tsx或_app.jsx,这个文件默认是没有的，只有你需要的时候你可以自己添加这个文件，比如我这个项目：

这个一般处理一些和redux或者react context相关的操作，比如此处：

import { ApolloProvider } from "@apollo/client";
import { AppProps } from "next/app";
import Head from "next/head";
import React from "react";
import ScrollControlProvider from "../components/shared/ScrollControlProvider";
import { SystemNotificationContainer } from "../components/shared/SystemNotifications";
import { useApollo } from "../lib/apolloClient";
import "../styles/index.scss";

export default function App({ Component, pageProps }: AppProps): React.ReactElement {
const apolloClient = useApollo(pageProps);

return (
<ApolloProvider client={apolloClient}>
<Head>
<title>Salami Slicing</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />
<link rel="icon" type="image/svg+xml" href="/images/logo.svg" />
</Head>
<ScrollControlProvider>
<SystemNotificationContainer>
<Component {...pageProps} />
</SystemNotificationContainer>
</ScrollControlProvider>
</ApolloProvider>
);
}
这个apollo状态以及系统级的一些通知提示类的东西。

修改document
如果你有自定义document的需求，比如自定义document的header之类，或者需要css-in-js之类的库，需要添加_document.js文件：

image.png
/* eslint-disable */
// copied from https://github.com/microsoft/fluentui/wiki/Server-side-rendering-and-browserless-testing#server-side-rendering
// with some changes. Therefore disable eslint checks
import { resetIds } from "@fluentui/utilities";
import * as React from "react";
import Document, { Head, Html, Main, NextScript } from "next/document";

// Do this in file scope to initialize the stylesheet before Fluent UI React components are imported.
import { InjectionMode, Stylesheet } from "@fluentui/style-utilities";
const stylesheet = Stylesheet.getInstance();

// Set the config.
stylesheet.setConfig({
injectionMode: InjectionMode.none,
namespace: "server",
});

// Now set up the document, and just reset the stylesheet.
export default class MyDocument extends Document {
static getInitialProps({ renderPage }) {
stylesheet.reset();
resetIds();

const page = renderPage((App) => (props) => <App {...props} />);

return { ...page, styleTags: stylesheet.getRules(true) };
}

render() {
return (
<Html>
<Head>
<style type="text/css" dangerouslySetInnerHTML={{ __html: this.props.styleTags }} />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}

这里主要处理@fluentuicss-in-js样式的需要，这段代码摘自@fluentui官网，还没搞明白具体为啥这么写(尴尬……)

一些细节

1，page下的_app.js与index.tsx什么区别

_app.js将包含您的整个应用程序，这意味着它将在项目的任何页面中呈现。如果你在这个文件中添加一个<div>hello world</div>，你会在你网站的每一页上看到Hello World。这里有更多的阅读。

index.js仅当您访问网站的/路径时才会呈现。每当您创建一个新页面时，您将使用索引文件，例如，您想要一个关于页面，您将有一个关于文件夹，其中包含一个index.js，所有这些都包含在pages文件夹中。这里有更多的阅读。

我自己的理解。_app.js是一个父组件，所有页面，最终传到pageProps里了

import '../styles/globals.css';
import Navbar from '../components/Navbar.tsx';

function MyApp({ Component, pageProps }) {
    return (
        <>
            <Navbar />
            <Component {...pageProps} />
        </>
    );
}

export default MyApp;

这里 Navbar 在所有页面都有。

参考：

https://www.jianshu.com/p/753cf3719665