Nextjs13 APP dir 使用体验

在新项目试用一段时间，有几个感受：

  • router 用起来还是没有 react-router 方便，不够自由，但相比 pages 目录方便一些。
  • 很多组件需要标记 use client; 很烦
  • AWS Amplify 已经支持，但生态支持还不够好，比如 msw 注入不方便
  • 加载速度上用户体验提升不明显（可能是我还没做优化）
  • page 组件直接拿到 cookie 可以轻松解决暗黑模式和 SSR + i18n 的渲染闪烁问题
next.js·server-side-rendering·cookies
304 views
Comments
登录后评论
Sign In
·

mswjs 有一个折中的方法：让 msw mock 独立运行，不依赖于 nextjs/react 等前端环境。

插件：http-middleware

// eslint-disable-next-line import/no-extraneous-dependencies
import { createServer } from '@mswjs/http-middleware';
import { handlers } from './handlers';

const httpServer = createServer(...handlers);
httpServer.listen(9090);
·

full code:

mocks/http.ts

import { createMiddleware } from '@mswjs/http-middleware';
import express from 'express';
import cors from 'cors';
import { handlers } from './handlers';

const app = express();
const port = 9090;

app.use(cors({ origin: 'http://localhost:3000', optionsSuccessStatus: 200, credentials: true }));
app.use(express.json());
app.use(createMiddleware(...handlers));
app.listen(port, () => console.log(`Mock server is running on port: ${port}`));

package.json

{
  "scripts": {
    "dev": "next dev",
    "mock": "npx tsx ./mocks/http.ts",
  }
}

axios settings:

axios.defaults.baseURL = 'http://localhost:9090';

start mock server yarn mock, start dev server yarn dev