Getting Started
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
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
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="github-light"
darkTheme="github-dark"
highlightColor="rgba(101, 117, 133, 0.16)"
/>
);
}
Installation
pnpm dlx shadcn@latest add @magicui/code-comparison
Usage
import { CodeComparison } from "@/components/magicui/code-comparison";
<CodeComparison beforeCode={beforeCode} afterCode={afterCode} />
Props
Prop | Type | Default | Description |
---|---|---|---|
className | string | - | The class name to be applied to the component |
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 | string | github-light | The theme to use for light mode |
darkTheme | string | github-dark | The theme to use for dark mode |
highlightColor | string | rgba(101, 117, 133, 0.16) | The color to use for highlighting the code snippets |
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development