Next.js 的 Blitz 适应器
Blitzjs 网站( 网站)
GitHub 图像
概览
这个 @blitzjs/next 适配器会显示特定的函数和组件
下一个.js框架.
设置
您可以安装 @blitzjs/next 运行以下命令:
npm i @blitzjs/next # yarn add @blitzjs/next # pnpm add @blitzjs/next
下一个配置
Blitz.js 扩展 next.config.js 通过接受一个 blitz
属性.
blitz?: {
resolverPath?: ResolverPathOptions;
customServer?: {
hotReload?: boolean;
};
};
客户端
示例
内部 src/blitz-client.ts数字 :
import {setupBlitzClient} from "@blitzjs/next"
export const {withBlitz} = setupBlitzClient({
plugins: [],
})
然后进去 src/pages/_app.tsx 关闭 MyApp 函数与
withBlitz HOC组件.
import {ErrorFallbackProps, ErrorComponent, ErrorBoundary} from "@blitzjs/next"
import {AuthenticationError, AuthorizationError} from "blitz"
import type {AppProps} from "next/app"
import React, {Suspense} from "react"
import {withBlitz} from "src/blitz-client"
function RootErrorFallback({error}: ErrorFallbackProps) {
if (error instanceof AuthenticationError) {
return <div>Error: You are not authenticated</div>
} else if (error instanceof AuthorizationError) {
return (
<ErrorComponent
statusCode={error.statusCode}
title="Sorry, you are not authorized to access this"
/>
)
} else {
return (
<ErrorComponent
statusCode={(error as any)?.statusCode || 400}
title={error.message || error.name}
/>
)
}
}
function MyApp({Component, pageProps}: AppProps) {
return (
<ErrorBoundary FallbackComponent={RootErrorFallback}>
<Component {...pageProps} />
</ErrorBoundary>
)
}
export default withBlitz(MyApp)
API 密码
setupBlitzClient({
plugins: [],
})
参数
plugins:Blitz.js 插件阵列- 需求
回返
带有 withBlitz HOC 包装器
服务器
示例
内部 src/blitz-server.ts
import {setupBlitzServer} from "@blitzjs/next"
export const {gSSP, gSP, api} = setupBlitzServer({
plugins: [],
})
API 密码
setupBlitzServer({
plugins: [],
onError?: (err) => void
})
参数
plugins:Blitz.js 插件阵列- 需求
onError:抓取所有错误 (服务如哨兵)
回返
带有 gSSP, (中文(简体) ),
gSP 打开 api 包装.
自定义服务器
Blitz CLI 支持运行自定义 Next.js 服务器. 这意味着你可以
使用 Blitz.js CLI 来编译 javascript并打字
注入嵌入变量。 默认情况下, CLI 检查
src/server/index.[ts | js] 或者说 src/server.[ts | js]
关于自定义的更多信息 Next.js 服务器,请检查
official docs
包装器
所有 Next.js 包装器功能都以
superjson。这意味着你可以
使用情况 Date, (中文(简体) ), Map, (中文(简体) ), Set 打开 BigInt 返回数据时。 还有一件事
注意: Blitz 在调用插件前先从插件中运行中间软件
下一个J请求处理器.
实例
获取StaticProps
import {gSP} from "src/blitz-server"
export const getStaticProps = gSP(async ({ctx}) => {
return {
props: {
data: {
userId: ctx?.session.userId,
session: {
id: ctx?.session.userId,
publicData: ctx?.session.$publicData,
},
},
},
}
})
获取服务软件
import {gSSP} from "src/blitz-server"
export const getServerSideProps = gSSP(async ({ctx}) => {
return {
props: {
userId: ctx?.session.userId,
publicData: ctx?.session.$publicData,
},
}
})
api 密码
import {api} from "src/blitz-server"
export default api(async (req, res, ctx) => {
res.status(200).json({userId: ctx?.session.userId})
})
有关 Next.js API 路线的更多信息,请访问他们的文件 https://nextjs.org/docs/api-routes/introduction (英语)
概念
在装入页面前认证用户
您可能想要检查用户是否在您的页面加载前登录 .
我们将会使用 getCurrentUser 内部查询
getServerSideProps() 直接调用查询。 然后你可以检查
如果用户在服务器上登录并使用内建的 Next.js
重定向属性 .
import {Routes, BlitzPage} from "@blitzjs/next"
import {gSSP} from "src/blitz-server"
import getCurrentUser from "src/users/queries/getCurrentUser"
export const getServerSideProps = gSSP(async ({ctx}) => {
const currentUser = await getCurrentUser(null, ctx)
if (currentUser) {
return {
props: {
user: currentUser,
},
}
} else {
return {
redirect: {
destination: Routes.LoginPage(),
permanent: false,
},
}
}
})
在服务器上获取数据时返回类型
您可以设定从 Next.js 数据获取函数返回的类型.
Next.js 函数的所有 Blitz.js 包装器都接受通用。 一样
与 BlitzPage 类型.
例如,我们可以使用一些打字工具来帮助使用
返回类型 getCurrentUser()
import {Routes, BlitzPage} from "@blitzjs/next"
import {gSSP} from "src/blitz-server"
import getCurrentUser from "src/users/queries/getCurrentUser"
type TCurrentUser = Awaited<ReturnType<typeof getCurrentUser>>
export const getServerSideProps = gSSP<{user: TCurrentUser}>(async ({ctx}) => {
const currentUser = await getCurrentUser(null, ctx)
if (currentUser) {
return {
props: {
user: currentUser,
},
}
} else {
return {
redirect: {
destination: Routes.LoginPage(),
permanent: false,
},
}
}
})
const Page: BlitzPage<{user: TCurrentUser}> = ({user}) => {
return (
<Layout title="Page">
<div className="container">
<p>User Page</p>
{user && <p>{user.email}</p>}
</div>
</Layout>
)
}
export default Page
在初始页面装入时处理错误
有个边缘案例,你可能会在查询中出错,那就是
正在调用初始页面负载, 导致服务器错误而不是
击打 <ErrorBoundary />。这是因为初始装入时
该页面,直到 _app.tsx 实值
安装。 虽然,这是预期的行为,但还是有办法的.
例如,在找不到用户的查询中,您可以创建
NotFoundError() 然后返回状态代码.
export default resolver.pipe(resolver.zod(GetUser), async (input) => {
const {id} = input
const user = await db.user.findFirst({where: {id}})
if (!user) {
const userError = new NotFoundError("User not found")
return {
error: userError.statusCode,
}
} else {
return {
user,
}
}
})
然后在服务器上(在这种情况下) getServerSideProps()你可以打电话给
查询,如果在返回对象中找到错误键,则显示
错误.
export const getServerSideProps = gSSP(async ({ ctx }) => {
const user = await getUser({ 1 }, ctx)
if("error" in user) {
return { props: { error: user.error}}
} else {
return { props: { user }}
}
})
您也可以在服务器中捕捉错误 _app.tsx 并用
吐司组件.
function MyApp({Component, pageProps}: AppProps) {
const getLayout = Component.getLayout || ((page) => page)
if (pageProps.error) {
return <ToastComponent>{pageProps.error.statusCode}</ToastComponent>
}
return (
<ErrorBoundary FallbackComponent={RootErrorFallback}>
{getLayout(<Component {...pageProps} />)}
</ErrorBoundary>
)
}