middleware.ts
import { NextRequest } from 'next/server'; export const middleware = async (req: NextRequest) => { let user = undefined; let team = undefined; const token = req.headers.get('token'); if(req.nextUrl.pathname.startsWith('/auth')) { user = await getUserByToken(token); if(!user) { return NextResponse.redirect('/login'); } } if(req.nextUrl.pathname.startsWith('/team')) { user = await getUserByToken(token); if(!user) { return NextResponse.redirect('/login'); } const slug = req.nextUrl.query.slug; team = await getTeamBySlug(slug); // [!code highlight] if(!team) { // [!code highlight] return NextResponse.redirect('/'); // [!code highlight] } // [!code highlight] } // [!code highlight] return NextResponse.next(); // [!code highlight] } export const config = { matcher: ['/((?!_next/|_static|_vercel|[\w-]+\.\w+).*)'], // [!code highlight] };
middleware.ts
import { createMiddleware, type MiddlewareFunctionProps } from '@app/(auth)/auth/_middleware'; import { auth } from '@/app/(auth)/auth/_middleware'; // [!code --] import { auth } from '@/app/(auth)/auth/_middleware'; // [!code ++] import { team } from '@/app/(team)/team/_middleware'; const middlewares = { '/auth{/:path?}': auth, '/team{/:slug?}': [ auth, team ], }; export const middleware = createMiddleware(middlewares); // [!code focus] export const config = { matcher: ['/((?!_next/|_static|_vercel|[\w-]+\.\w+).*)'], };
安装
用法
import { CodeComparison } from "@/components/magicui/code-comparison";
<CodeComparison beforeCode={beforeCode} afterCode={afterCode} />
属性
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
className | string | - | 要应用于组件的类名 |
beforeCode | string | - | 在“之前”部分显示的代码片段 |
afterCode | string | - | 在“之后”部分显示的代码片段 |
language | string | - | 代码片段的语言(例如,“typescript”) |
filename | string | - | 为代码片段显示的文件名 |
lightTheme | string | github-light | 亮模式下使用的主题 |
darkTheme | string | github-dark | 暗模式下使用的主题 |
highlightColor | string | rgba(101, 117, 133, 0.16) | 用于高亮代码片段的颜色 |