🙈Next.js，但是已经是Blitz.js的形状了🚫

前言

大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

如果您有一个现有的 Next.js 项目，并且希望使用 Blitz Toolkit 的部分或全部功能，本页面将为您提供设置信息。需要几个步骤，我们将逐一介绍。

添加所需的依赖项

yarn add blitz @blitzjs/next

# 或者

pnpm add blitz @blitzjs/next

# 或者

npm i blitz @blitzjs/next

Blitz 服务器设置

如果您想使用 Blitz 的服务器功能，比如认证、中间件、rpc，您需要在项目中创建一个 blitz-server.ts 文件，例如在 src/blitz-server.ts。我们稍后会介绍如何添加插件。

import { setupBlitzServer } from "@blitzjs/next"

const {
  /* 插件的导出 */
} = setupBlitzServer({
  plugins: [
    // 插件将放在这里
  ],
})

Blitz 客户端设置

现在，如果您想要 Blitz 的客户端功能，您必须创建一个 blitz-client.ts 文件。它可以与 blitz-server.ts 放在 src/blitz-client.ts 旁边。

import { setupBlitzClient } from "@blitzjs/next"

export const { withBlitz } = setupBlitzClient({
  plugins: [
    // 插件将放在这里
  ],
})

withBlitz 函数将需要用来包裹您的组件，以实现 Blitz 的客户端功能。

在您的 App 组件中使用 `withBlitz`

要在客户端使用 Blitz，您还必须在 App 组件中使用 withBlitz 函数。

import { withBlitz } from "src/blitz-client"

function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default withBlitz(App)

修改 `next.config.js` 文件

Next.js 要求您手动输入页面位置。Blitz 提供了一个路由清单，所以您可以这样做：

<Link href={Routes.ProductsPage({ productId: 123 })} />
// 而不是
<Link href={`/products/${123}`} />

要启用它，您必须在 next.config.js 文件中用 withBlitz 包裹您的配置：

const { withBlitz } = require("@blitzjs/next")

module.exports = withBlitz()

添加插件

现在您已经完成了基本设置，可以添加您想要在应用中使用的插件。有几个地方可以查看：

@blitzjs/auth — 它涵盖了如何设置认证插件以及如何使用 Blitz 认证系统。
@blitzjs/rpc — 查看它以了解如何设置 Blitz 的零 API 层，并了解更多信息。

最后，您可以查看更多关于如何在Next.js使用Blitz.js的功能的详细信息，以了解如何在 getServerSideProps、getStaticProps、Next API 路由等地方使用 Blitz 功能。

最后感谢阅读！欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

🙈Next.js，但是已经是Blitz.js的形状了🚫