Code Comparison
A component which compares two code snippets.
Preview
PreviewCode
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+).*)'],
};
import { createMiddleware, type MiddlewareFunctionProps } from '@app/(auth)/auth/_middleware';
import { auth } 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+).*)'],
};
Installation
CLI
Manual
Usage
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 |