隆重推出 Magic UI Pro - 超过50个组件和模板,助您在几分钟内构建出精美的着陆页。

命令面板

搜索要运行的命令...

文档
代码对比

代码对比

一个用于对比两个代码片段的组件。

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} />

属性

属性类型默认值描述
classNamestring-要应用于组件的类名
beforeCodestring-在“之前”部分显示的代码片段
afterCodestring-在“之后”部分显示的代码片段
languagestring-代码片段的语言(例如,“typescript”)
filenamestring-为代码片段显示的文件名
lightThemestringgithub-light亮模式下使用的主题
darkThemestringgithub-dark暗模式下使用的主题
highlightColorstringrgba(101, 117, 133, 0.16)用于高亮代码片段的颜色