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);
if(!team) {
return NextResponse.redirect('/');
}
}
return NextResponse.next();
}
export const config = {
matcher: ['/((?!_next/|_static|_vercel|[\w-]+\.\w+).*)'],
};middleware.tsafter
import { createMiddleware, type MiddlewareFunctionProps } from '@app/(auth)/auth/_middleware';
import { auth } from '@app/(auth)/auth/_middleware';
import { team } from '@app/(team)/team/_middleware';
const middlewares = {
'/auth{/:path?}': auth,
'/team{/:slug?}': [ auth, team ],
};
export const middleware = createMiddleware(middlewares);
export const config = {
matcher: ['/((?!_next/|_static|_vercel|[\w-]+\.\w+).*)'],
};VS
Installation
npx shadcn@latest add "https://magicui.design/r/code-comparison"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 |