Update middleware
example to App Router (#65618)
### What? Update the `middleware` example to Next.js 14 App Router. ### Why? App Router is recommended. ### How? Follow Next.js App Router documentation.
This commit is contained in:
parent
f412c5e72a
commit
359fdb2e5d
18 changed files with 60 additions and 82 deletions
|
@ -1,3 +0,0 @@
|
||||||
{
|
|
||||||
"extends": "next/core-web-vitals"
|
|
||||||
}
|
|
|
@ -1,8 +1,8 @@
|
||||||
# Middleware
|
# Middleware
|
||||||
|
|
||||||
This example shows how to use [Middleware in Next.js](https://nextjs.org/docs/advanced-features/middleware) to run code before a request is completed.
|
This example shows how to use [Middleware in Next.js](https://nextjs.org/docs/app/building-your-application/routing/middleware) to run code before a request is completed.
|
||||||
|
|
||||||
The index page ([`pages/index.tsx`](pages/index.tsx)) has a list of links to pages with `redirect`, `rewrite`, or normal behavior.
|
The index page ([`app/page.tsx`](app/page.tsx)) has a list of links to pages with `redirect`, `rewrite`, or normal behavior.
|
||||||
|
|
||||||
On the Middleware file ([`middleware.ts`](middleware.ts)) the routes are already being filtered by defining a `matcher` on the exported config. If you want the Middleware to run for every request, you can remove the `matcher`.
|
On the Middleware file ([`middleware.ts`](middleware.ts)) the routes are already being filtered by defining a `matcher` on the exported config. If you want the Middleware to run for every request, you can remove the `matcher`.
|
||||||
|
|
||||||
|
|
3
examples/middleware/app/about/page.tsx
Normal file
3
examples/middleware/app/about/page.tsx
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
export default function AboutPage() {
|
||||||
|
return <h1>About</h1>;
|
||||||
|
}
|
3
examples/middleware/app/about2/page.tsx
Normal file
3
examples/middleware/app/about2/page.tsx
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
export default function About2Page() {
|
||||||
|
return <h1>About 2</h1>;
|
||||||
|
}
|
3
examples/middleware/app/another/page.tsx
Normal file
3
examples/middleware/app/another/page.tsx
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
export default function AnotherPage() {
|
||||||
|
return <h1>Another</h1>;
|
||||||
|
}
|
18
examples/middleware/app/layout.tsx
Normal file
18
examples/middleware/app/layout.tsx
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
import type { Metadata } from "next";
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<body>{children}</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "Next.js Middleware example",
|
||||||
|
description: "Redirect and rewrite pages using Next.js Middleware.",
|
||||||
|
};
|
18
examples/middleware/app/page.tsx
Executable file
18
examples/middleware/app/page.tsx
Executable file
|
@ -0,0 +1,18 @@
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>Index</h1>
|
||||||
|
<p>
|
||||||
|
<Link href="/about">Go to about page (will redirect)</Link>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<Link href="/another">Go to another page (will rewrite)</Link>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<Link href="/about2">Go to about 2 page (no redirect or rewrite)</Link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
3
examples/middleware/app/redirected/page.tsx
Normal file
3
examples/middleware/app/redirected/page.tsx
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
export default function RedirectedPage() {
|
||||||
|
return <h1>Redirected from /about</h1>;
|
||||||
|
}
|
3
examples/middleware/app/rewrite/page.tsx
Normal file
3
examples/middleware/app/rewrite/page.tsx
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
export default function RewritePage() {
|
||||||
|
return <h1>Rewrite</h1>;
|
||||||
|
}
|
|
@ -1,6 +0,0 @@
|
||||||
/** @type {import('next').NextConfig} */
|
|
||||||
const nextConfig = {
|
|
||||||
reactStrictMode: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
module.exports = nextConfig;
|
|
|
@ -1,7 +0,0 @@
|
||||||
import type { AppProps } from "next/app";
|
|
||||||
|
|
||||||
function MyApp({ Component, pageProps }: AppProps) {
|
|
||||||
return <Component {...pageProps} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default MyApp;
|
|
|
@ -1,7 +0,0 @@
|
||||||
import { NextPage } from "next";
|
|
||||||
|
|
||||||
export const AboutPage: NextPage = () => {
|
|
||||||
return <h1>About</h1>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AboutPage;
|
|
|
@ -1,7 +0,0 @@
|
||||||
import { NextPage } from "next";
|
|
||||||
|
|
||||||
export const About2Page: NextPage = () => {
|
|
||||||
return <h1>About 2</h1>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default About2Page;
|
|
|
@ -1,7 +0,0 @@
|
||||||
import { NextPage } from "next";
|
|
||||||
|
|
||||||
export const AnotherPage: NextPage = () => {
|
|
||||||
return <h1>Another</h1>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AnotherPage;
|
|
|
@ -1,27 +0,0 @@
|
||||||
import type { NextPage } from "next";
|
|
||||||
import Link from "next/link";
|
|
||||||
|
|
||||||
const Home: NextPage = () => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h1>Index</h1>
|
|
||||||
<p>
|
|
||||||
<Link href="/about" passHref>
|
|
||||||
Go to about page (will redirect)
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<Link href="/another" passHref>
|
|
||||||
Go to another page (will rewrite)
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<Link href="/about2" passHref>
|
|
||||||
Go to about 2 page (no redirect or rewrite)
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Home;
|
|
|
@ -1,7 +0,0 @@
|
||||||
import { NextPage } from "next";
|
|
||||||
|
|
||||||
export const RedirectedPage: NextPage = () => {
|
|
||||||
return <h1>Redirected from /about</h1>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default RedirectedPage;
|
|
|
@ -1,7 +0,0 @@
|
||||||
import { NextPage } from "next";
|
|
||||||
|
|
||||||
export const RewritePage: NextPage = () => {
|
|
||||||
return <h1>Rewrite</h1>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default RewritePage;
|
|
|
@ -13,8 +13,13 @@
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"isolatedModules": true,
|
"isolatedModules": true,
|
||||||
"jsx": "preserve",
|
"jsx": "preserve",
|
||||||
"incremental": true
|
"incremental": true,
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||||
"exclude": ["node_modules"]
|
"exclude": ["node_modules"]
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue