tessl/npm-next
The React Framework for production-grade applications with server-side rendering, static site generation, and full-stack capabilities
—
Pending
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Securityby
Pending
The risk profile of this skill
special-files.mddocs/
Next.js Special Files
File conventions for App Router and Pages Router.
App Router Files
layout.tsx
export default function Layout({ children }) {
return (
<div>
<nav>Navigation</nav>
<main>{children}</main>
</div>
);
}page.tsx
export default async function Page({ params, searchParams }) {
const data = await fetchData();
return <div>{data}</div>;
}loading.tsx
export default function Loading() {
return <div>Loading...</div>;
}error.tsx
'use client';
export default function Error({ error, reset }) {
return (
<div>
<h2>Error: {error.message}</h2>
<button onClick={reset}>Try again</button>
</div>
);
}not-found.tsx
export default function NotFound() {
return (
<div>
<h2>Not Found</h2>
<Link href="/">Go Home</Link>
</div>
);
}route.ts
import { NextRequest, NextResponse } from 'next/server';
export async function GET(request: NextRequest) {
return NextResponse.json({ data: 'value' });
}middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
if (request.nextUrl.pathname.startsWith('/dashboard')) {
return NextResponse.redirect(new URL('/login', request.url));
}
}
export const config = {
matcher: ['/dashboard/:path*'],
};Pages Router Files
pages/_app.tsx
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}pages/404.tsx
export default function Custom404() {
return <h1>404 - Page Not Found</h1>;
}