code-comparison

1import CodeComparison from "@/components/magicui/code-comparison";
2 
3const beforeCode = `import { NextRequest } from 'next/server';
4 
5export const middleware = async (req: NextRequest) => {
6  let user = undefined;
7  let team = undefined;
8  const token = req.headers.get('token');
9 
10  if(req.nextUrl.pathname.startsWith('/auth')) {
11    user = await getUserByToken(token);
12 
13    if(!user) {
14      return NextResponse.redirect('/login');
15    }
16  }
17 
18  if(req.nextUrl.pathname.startsWith('/team')) {
19    user = await getUserByToken(token);
20 
21    if(!user) {
22      return NextResponse.redirect('/login');
23    }
24 
25    const slug = req.nextUrl.query.slug;
26    team = await getTeamBySlug(slug);
27 
28    if(!team) {
29      return NextResponse.redirect('/');
30    }
31  }
32 
33  return NextResponse.next();
34}
35 
36export const config = {
37  matcher: ['/((?!_next/|_static|_vercel|[\\w-]+\\.\\w+).*)'],
38};`;
39 
40const afterCode = `import { createMiddleware, type MiddlewareFunctionProps } from '@app/(auth)/auth/_middleware';
41import { auth } from '@app/(auth)/auth/_middleware';
42import { team } from '@app/(team)/team/_middleware';
43 
44const middlewares = {
45  '/auth{/:path?}': auth,
46  '/team{/:slug?}': [ auth, team ],
47};
48 
49export const middleware = createMiddleware(middlewares);
50 
51export const config = {
52  matcher: ['/((?!_next/|_static|_vercel|[\\w-]+\\.\\w+).*)'],
53};`;
54 
55export function CodeComparisonDemo() {
56  return (
57    <CodeComparison
58      beforeCode={beforeCode}
59      afterCode={afterCode}
60      language="typescript"
61      filename="middleware.ts"
62      lightTheme="github-light"
63      darkTheme="github-dark"
64    />
65  );
66}