NextJS 如何启用 experialDecorators ？

在 Next.js 中启用实验性的装饰器支持，您需要进行一些配置。下面的步骤将指导您如何启用实验性的装饰器：

1. 首先，确保你的项目中安装了Next.js，并且你有一个 next.config.js 配置文件。如果没有，可以通过运行下面的命令来创建一个：

bash
touch next.config.js

1. 接下来，在 next.config.js 文件中启用对装饰器的支持。你需要使用 experimental 键来更改 Next.js 的默认配置。你的 next.config.js 文件应该像这样：

javascript
module.exports = {
  experimental: {
    // 开启装饰器支持
    decorators: true
  }
}

1. 你还需要确保你的项目使用了正确的 Babel 插件来转换装饰器语法。为此，你需要在项目中安装 @babel/plugin-proposal-decorators 和 @babel/plugin-proposal-class-properties 插件：

bash
npm install @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties --save-dev

1. 在你的 .babelrc 或 babel.config.js 文件中配置这些插件。如果你没有这些文件，就创建一个 .babelrc 文件：

bash
touch .babelrc

然后配置 Babel 来使用这些插件：

json
{
  "presets": ["next/babel"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

确保 @babel/plugin-proposal-decorators 在 @babel/plugin-proposal-class-properties 之前。这个配置使用了旧版（legacy）装饰器语法和宽松模式（loose）的类属性。

1. 之后，你就可以在你的 Next.js 项目中使用装饰器了。

请注意，这个特性是实验性的，可能在将来的 Next.js 版本中会有变动。始终建议查阅最新的官方文档来获取当前最准确的信息。此外，实验性特性可能存在稳定性问题，所以在生产环境中使用时要格外小心。