Next.js 是一个好库，设计上很优雅，实现上也没有什么大的问题。然而，考虑再三我还是决定暂时移除 next.js 了。不是我不想要服务端渲染，而是整个 JS 的生态圈大部分的库都没有考虑服务端渲染，这就导致我在学习和使用的过程中时不时要自己考虑如何处理服务端渲染的情形。本身我就是个初学者，连教程都看不太懂，再考虑服务端渲染，就一个头两个大了。另外一个原因就是组里另一个项目使用了 react-router, 没必要两个都搞了。这里姑且记录下移除 next.js, 添加 react-router 的过程，以便以后参考。

删除 nextjs

yarn remove next

更改 package.json scripts 部分的脚本：

"scripts": {
    "start": "react-scripts start",
    "dev": "react-scripts dev",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

还好之前 create-react-app 创建的 index.js 和 App.js 还没删掉，直接就能用了。

样式

nextjs 中规定了只能用 module css 或者 scoped css, 而在 react 中没有硬性的规定。如果使用原生 CSS 的话自然最简单，但是容易名字冲突。鉴于另一个项目使用了 sass, 这里也用 sass 以统一下开发体验。

页面

暂时先保留 pages, components, layouts 三个文件夹，但是需要使用 react-router 路由。

yarn add react-router react-router-dom

在 index.js 中使用 router, 去掉 <App/>

Link

更改所有的 Link. 从 import Link from 'next/link' 改成 import {Link} from 'react-router-dom', 其中需要把 href 改为 to.

更改所有的 useRouter 的跳转，需要使用 useHistory.

获取数据

页面里的 getServerSideProps 显然是不能用了，需要改用 redux 的 thunk 来获取数据，所以需要以下几步：

1. 设置对后端 API 的代理，在 package.json 中添加 "proxy": "http://localhost:4000", 即可
2. 引入 redux, 设计 store 等
3. 调整请求接口到 redux 中

一般来说，我们把相应的 getServerSideProps 函数的逻辑转移到对应的 Page 组件的 useEffect(fn, []) 钩子中就可以了。

代理的问题

在 next.js 中，需要在两个地方指定代理，一个是后端在 server 预加载数据的时候，需要指定上游 API 的地址，另一方面，在浏览器中发送 ajax 请求的时候需要设定代理访问上游 API, 否则会有跨域的问题。

使用 react-router 之后问题就简单了，所有数据都是从前端加载的，所以只需要指定代理的地址就好了。但是也要考虑到几种不同的环境：

1. 开发阶段的配置
2. 部署阶段的配置
3. 如果有多个后端如何处理
4. 用户鉴权放在哪里

综合考虑后，采用以下几点：

1. 用户鉴权放在前端的 server, 也就是 express 中，这样就避免了上游 API 再添加复杂的逻辑，但是用户列表可以放在后端中。
2. 开发环境和部署环境统一使用 express 代理多个后端，这样在开发环境也能保证和生产环境一样的效果，方便 debug.

参考

1. https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually
2. https://stackoverflow.com/questions/50260684/bundle-react-express-app-for-production
3. https://dev.to/nburgess/creating-a-react-app-with-react-router-and-an-express-backend-33l3

nextjs 的 Link 无法自定义 escape

nextjs 中的 Link 的 href 对象如果传的是字典，直接调用的是 nodejs 的 URL 库，不能自定义 escape, 比如说空格会被强制格式化成加好，而不是 %20. 而且好像它使用的这个 API 在 11.0 已经 deprecated 了，所以需要啥 url 的话，还是自己格式化吧~

不支持 loading spinner

Nextjs 不支持在页面跳转的时候触发 Loading Spinner, 也就是转动的小圆圈，所以需要自己实现一下，可以用 nprogress

在 _app.js 中：

import Router from 'next/router';
import NProgress from 'nprogress'; //nprogress module
import 'nprogress/nprogress.css'; //styles of nprogress

//Binding events. 
Router.events.on('routeChangeStart', () => NProgress.start());
Router.events.on('routeChangeComplete', () => NProgress.done());
Router.events.on('routeChangeError', () => NProgress.done());

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

代理后端 API 服务器

在 next.config.js 中配置重定向：

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/proxy/:path*',
        destination: `${process.env.NEXT_PUBLIC_API_URL}/:path*`,
      },
    ]
  },
}

参考

1. https://levelup.gitconnected.com/improve-ux-of-your-next-js-app-in-3-minutes-with-page-loading-indicator-3a422113304d
2. https://github.com/vercel/next.js/discussions/14057
3. https://nextjs.org/docs/api-reference/next.config.js/rewrites

使用 useState hook

useState 可以用来管理一个组件比较简单的一两个状态，如果状态多了不适合使用 useState 管理，可以使用 useReducer.

import React, {useState} from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

使用 useEffect hook

useEffect hook 用来实现一些副作用，一般可以用作页面首次加载时读取数据。

import React, {useState, useEffect} from 'react';

function App() {
  const [isOn, setIsOn] = useState(false);

  useEffect(() => {
    let interval;
    if (isOn) {
      interval = setInterval(() => console.log('tick'), 1000);
    }
    return () => clearInterval(interval);
  }, [isOn]);
  ...
}

export default App;

在 useEffect 中返回的函数会被用来做垃圾清理。另外需要注意的是，初始化的时候总会触发一次 useEffect.

默认情况下，每次 state 有改变的时候，都会调用 useEffect 函数。如果需要更改触发的时机，那么需要使用 useEffect 的第二个参数来指定监听的事件或者说状态。当第二个参数只使用一个空数组 [] 的时候就只会在组件加载的时候调用。数组中有哪些变量，表示在这些变量变化的时候调用。

使用 useContext hook

Context 用来向所有包含的元素广播状态，或者说事件，而不需要通过组件树层层传递。

1. 首先需要通过 React.createContext 定义一个高层次 Context,
2. 然后在最外层使用 <MyContext.Provider /> 来包裹需要接受这个 context 的所有组件。
3. 在需要使用状态的元素中调用 const ctx = useContext(MyContext), 然后使用 ctx 访问 Context 中的值

在基于类的 React 组件中，需要使用 <MyContext.Consumer /> 来实现读取值，现在我们都用 useContext 钩子了。

const themes = {
  light: { foreground: "#000000", background: "#eeeeee" },
  dark: { foreground: "#ffffff", background: "#222222" }
};

const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar(props) {
  return (
    <div> <ThemedButton /> </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

使用 useReducer hook

useReducer 和 useState 的用途基本是一样的，但是当需要的状态比较复杂的时候，最好使用 useReducer. 有了 useReducer 钩子，基本上可以不使用 redux 了。

const [state, dispatch] = useReducer(reducer, initialArg, init);

useReducer 通常放在管理一组状态的根元素这个层级，比如说一个页面。dispatch 函数触发事件，reducer 函数用来处理事件，更新 state.

需要注意的是，在 useReducer 的 reducer 函数中，和 redux 不同的是，不需要 state=initialState 这个参数。默认参数在调用 useReducer 的时候已经给出了。

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

useReducer + useContext = (Better) Redux

可以组合使用 useReducer 和 useContext 来实现 Redux 的功能。对于某个组件自身的数据，我们只使用 useReducer 就可以很好地管理了。然而对于多个组件都需要使用的全局数据，需要是用 useContext 来广播给所有需要该数据的组件。

两者的组合使用很简单，使用 Context.Provider 把 state 和 dispatch 这两个变量广播给 root 下的所有元素，这样在需要使用 state 和 dispatch 的地方直接 useContext(Context) 就好了。

useMemo/useCallback 钩子

用来避免重复计算或者重复生成函数。

useRef 钩子

https://stackoverflow.com/questions/56455887/react-usestate-or-useref

自定义钩子

通过灵活组合 useState, 和 useEffect, 我们完全可以创建自己的钩子。

import React from 'react';

function useOffline() {
  const [isOffline, setIsOffline] = React.useState(false);

  function onOffline() {
    setIsOffline(true);
  }

  function onOnline() {
    setIsOffline(false);
  }

  React.useEffect(() => {
    window.addEventListener('offline', onOffline);
    window.addEventListener('online', onOnline);

    return () => {
      window.removeEventListener('offline', onOffline);
      window.removeEventListener('online', onOnline);
    };
  }, []);

  return isOffline;
}

function App() {
  const isOffline = useOffline();

  if (isOffline) {
    return <div>Sorry, you are offline ...</div>;
  }

  return <div>You are online!</div>;
}

export default App;

参考

1. https://www.robinwieruch.de/react-hooks
2. https://www.robinwieruch.de/react-hooks-fetch-data
3. https://medium.com/@nazrhan.mohcine/react-hooks-work-with-usestate-and-usereducer-effectively-471646cdf925
4. https://swizec.com/blog/usereducer-usecontext-for-easy-global-state-without-libraries

当我们要写一个稍微复杂的 React 应用的时候，就需要路由功能了，比较流行的路由是 react router. 这是一个很好的库，但是当我们已经用到路由的时候，下一步就该考虑如何做服务端渲染了，所以直接上 next.js 吧。

鉴于我已经使用 create-react-app 创建了 react 应用，需要手工安装一下 next.js

yarn add next

把 package.json 中的 scripts 替换掉

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

核心概念

next 的核心概念是页面，没啥可解释的吧。按照约定，放在 /pages 文件夹中的每一个组件都是一个页面，比较恶心的是每个组件需要使用 export default 导出。

当然，pages/index.js 对应的自然是首页了。

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

然后就可以看到首页啦！啊啊啊

next.js 中，完全按照文件的物理路径来确定路由，比如如果你需要 post/1 这种路径，直接定义 pages/post/[id].js, 也是够直接了。

读取 URL 参数

需要使用 router 来手动读取

import {useRouter} from 'next/router'

function MyPage() {
  const router = useRouter();
  const {keyword} = router.query;
}

获取数据

在 nextjs 中，鼓励的方式是在服务端编译或者渲染的时候获取数据，而不是由客户端渲染数据。这里我们先不看 SSG 了，看现在最需要的 SSR.

在一个页面中，export 一个 async 函数 getServerSideProps 就可以实现获取服务端的数据。

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

context 中比较重要的几个属性：

• params 路径中的参数，比如 {id: xxx}
• req/res 请求响应
• query query_string

在这个函数中，应该直接读取数据库或者外部 API.

除此之外，另一种方式自然是传统的在客户端获取数据了，可以使用 useSWR 库。

样式

next.js 中默认不让导入全局的 CSS, 所以你必须在 pages/_app.js 中导入全局的 css.

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

对于每一个组件，把它们的样式文件放到 [name].module.css 中就好啦。然后需要导入

import styles from 'Button.module.css';

export default function Button() {
  return <div className={styles.button}>Button</div>
}

另一种方式是使用 styled-jsx, 也就是把 CSS-in-JS 的方式，我个人还是喜欢这种方式一些。但是这种不好在 VSCode 中直接显示调色板。

<style jsx>{`
  h1 {
    color: red;
  }
`}</style>

静态文件

也很简单，直接放到 /public 目录，然后就能在根路径访问了。

路由

使用 [xxx] 放在路径中作为参数就好了。

nextjs 中的链接是这样的：

<Link href="/blog/[slug]" as={`/blog/${post.slug}`}>
    <a>{post.title}</a>
</Link>

外部接口

错误页面

next.js 可以自定义 404 和 500 错误页面

参考

1. https://haodong.io/render-client-side-only-component-in-next-js
2. https://github.com/vercel/next.js/blob/canary/examples/progressive-render/pages/index.js