Code Comparison

PreviewCode

middleware.tsbefore

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.tsafter

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+).*)'],
};

VS

@/demos/CodeComparisonDemo.tsx

import githubDark from '@shikijs/themes/github-dark'
import githubLight from '@shikijs/themes/github-light'

import { CodeComparison } from '@/registry/magicui/code-comparison'

const beforeCode = `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]
};`

const afterCode = `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+).*)'],
};`

export function CodeComparisonDemo() {
  return (
    <CodeComparison
      beforeCode={beforeCode}
      afterCode={afterCode}
      language="typescript"
      filename="middleware.ts"
      lightTheme={githubLight}
      darkTheme={githubDark}
      highlightColor="rgba(101, 117, 133, 0.16)"
    />
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/code-comparison

bun

bunx shadcn@latest add @magicui-solid/code-comparison

yarn

yarn dlx shadcn@latest add @magicui-solid/code-comparison

npm

npx shadcn@latest add @magicui-solid/code-comparison

Import

import { CodeComparison } from '@/components/magicui/code-comparison'
import githubDark from '@shikijs/themes/github-dark'
import githubLight from '@shikijs/themes/github-light'

Usage

<CodeComparison
  beforeCode={beforeCode}
  afterCode={afterCode}
  language="typescript"
  filename="middleware.ts"
  lightTheme={githubLight}
  darkTheme={githubDark}
/>

Props

Prop	Type	Default	Description
beforeCode	string	-	The code snippet to display in the “before” section
afterCode	string	-	The code snippet to display in the “after” section
language	string	-	The language of the code snippets (e.g., “typescript”)
filename	string	-	The filename to display for the code snippets
lightTheme	ThemeRegistration	-	The theme object for light mode (import from @shikijs/themes)
darkTheme	ThemeRegistration	-	The theme object for dark mode (import from @shikijs/themes)
highlightColor	string	rgba(101, 117, 133, 0.16)	The color to use for highlighting the code snippets

Original:

magicui.design/docs/components/code-comparison