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 | Description | Default |
---|---|---|---|
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 | The theme to use for light mode | "github-light" |
darkTheme | string | The theme to use for dark mode | "github-dark" |