archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update middleware example to App Router (#65618)

Browse source 
### 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:
Nhan Doan 2024-05-14 04:03:09 +07:00 committed by GitHub
parent f412c5e72a
commit 359fdb2e5d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 60 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
examples/middleware/.eslintrc.json
View file

@ -1,3 +0,0 @@
{
"extends": "next/core-web-vitals"
}

4
examples/middleware/README.md
View file

@ -1,8 +1,8 @@
# 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`.

3
examples/middleware/app/about/page.tsx Normal file
View file

@ -0,0 +1,3 @@
export default function AboutPage() {
return <h1>About</h1>;
}

3
examples/middleware/app/about2/page.tsx Normal file
View file

@ -0,0 +1,3 @@
export default function About2Page() {
return <h1>About 2</h1>;
}

3
examples/middleware/app/another/page.tsx Normal file
View file

@ -0,0 +1,3 @@
export default function AnotherPage() {
return <h1>Another</h1>;
}

18
examples/middleware/app/layout.tsx Normal file
View 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
View 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
View file

@ -0,0 +1,3 @@
export default function RedirectedPage() {
return <h1>Redirected from /about</h1>;
}

3
examples/middleware/app/rewrite/page.tsx Normal file
View file

@ -0,0 +1,3 @@
export default function RewritePage() {
return <h1>Rewrite</h1>;
}

6
examples/middleware/next.config.js
View file

@ -1,6 +0,0 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
};
module.exports = nextConfig;

7
examples/middleware/pages/_app.tsx
View file

@ -1,7 +0,0 @@
import type { AppProps } from "next/app";
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
export default MyApp;

7
examples/middleware/pages/about.tsx
View file

@ -1,7 +0,0 @@
import { NextPage } from "next";
export const AboutPage: NextPage = () => {
return <h1>About</h1>;
};
export default AboutPage;

7
examples/middleware/pages/about2.tsx
View file

@ -1,7 +0,0 @@
import { NextPage } from "next";
export const About2Page: NextPage = () => {
return <h1>About 2</h1>;
};
export default About2Page;

7
examples/middleware/pages/another.tsx
View file

@ -1,7 +0,0 @@
import { NextPage } from "next";
export const AnotherPage: NextPage = () => {
return <h1>Another</h1>;
};
export default AnotherPage;

27
examples/middleware/pages/index.tsx
View file

@ -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;

7
examples/middleware/pages/redirected.tsx
View file

@ -1,7 +0,0 @@
import { NextPage } from "next";
export const RedirectedPage: NextPage = () => {
return <h1>Redirected from /about</h1>;
};
export default RedirectedPage;

7
examples/middleware/pages/rewrite.tsx
View file

@ -1,7 +0,0 @@
import { NextPage } from "next";
export const RewritePage: NextPage = () => {
return <h1>Rewrite</h1>;
};
export default RewritePage;

9
examples/middleware/tsconfig.json
View file

@ -13,8 +13,13 @@
"resolveJsonModule": true,
"isolatedModules": true,
"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"]
}