补充知识

1、nextjs默认的编译器采用的是webpack5。

2、使用mdx

  npm install @next/mdx @mdx-js/loader @mdx-js/react
  
  const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
});

const nextConfig = {
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
  reactStrictMode: true,
  async rewrites() {
    return [
      {
        source: '/sitemap.xml',
        destination: '/api/sitemap',
      },
    ];
  },
  webpack: (config) => {
    config.resolve.fallback = { fs: false };
    return config;
  },
};

module.exports = withMDX(nextConfig);

3、import导入顺序规范

在Next.js和其他JavaScript项目中，没有严格的导入顺序规定。但是，遵循一些通用的导入顺序规范可以使代码更加整洁和易于阅读。以下是一种推荐的导入顺序：

  1. 第三方库和框架（如react, next, styled-components等）
  2. 组件（如Layout, Date等）
  3. 工具和辅助函数（如getSortedPostsData）
  4. 常量和配置文件
  5. 样式文件（如CSS或Sass模块）

4、什么时候在next.js项目中使用import React from 'react'

-Importing react into pages in next.js (and also React and CRA apps

5、从 Next.js 12 开始，支持使用 ES modules 语法编写配置文件 next.config.js，只需要将其改名为 next.config.mjs 即可。在之前的版本中，只支持使用 CommonJS 语法编写配置文件。

6、next.js中的_app.js和_document.js的区别与联系

chatgpt总结的_document.js和_app.js的区别与联系

7、可视化报告

# 安装@next/bundle-analyzer
pnpm add @next/bundle-analyzer

# 在next.config.mjs中进行相关的配置

# 运行Bundle Analyzer
# 生成交互式的可视化报告展示了你的Next.js应用的bundle大小和构成。
ANALYZE=true npm run build

next.config.mjs中的相关配置

import remarkGfm from 'remark-gfm';
import createMDX from '@next/mdx';
import NextBundleAnalyzer from '@next/bundle-analyzer';

const withMDX = createMDX({
    extension: /\.mdx?$/,
    options: {
        remarkPlugins: [remarkGfm],
        rehypePlugins: [],
    },
});

// 添加这一行来配置NextBundleAnalyzer
const withBundleAnalyzer = NextBundleAnalyzer({
    enabled: process.env.ANALYZE === 'true',
});

export default withBundleAnalyzer(
    withMDX({
        pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
        reactStrictMode: true,
        async rewrites() {
            return [
                {
                    source: '/sitemap.xml',
                    destination: '/api/sitemap',
                },
            ];
        },
        webpack: (config) => {
            config.resolve.fallback = { fs: false };
            return config;
        },
    })
);

8、纪录片