Skip to content

Commit 95fd3a8

Browse files
vicbvicb
committed
feat: import the middleware example
1 parent d19b949 commit 95fd3a8

File tree

14 files changed

+184
-0
lines changed

14 files changed

+184
-0
lines changed

‎examples/middleware/.gitignore‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts

‎examples/middleware/README.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Middleware
2+
3+
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.
4+
5+
The index page ([`app/page.tsx`](app/page.tsx)) has a list of links to pages with `redirect`, `rewrite`, or normal behavior.
6+
7+
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`.
8+
9+
## Deploy your own
10+
11+
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
12+
13+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/middleware&project-name=middleware&repository-name=middleware)
14+
15+
## How to use
16+
17+
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
18+
19+
```bash
20+
npx create-next-app --example middleware middleware-app
21+
```
22+
23+
```bash
24+
yarn create next-app --example middleware middleware-app
25+
```
26+
27+
```bash
28+
pnpm create next-app --example middleware middleware-app
29+
```
30+
31+
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

‎examples/middleware/app/about/page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function AboutPage() {
2+
return <h1>About</h1>;
3+
}

‎examples/middleware/app/about2/page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function About2Page() {
2+
return <h1>About 2</h1>;
3+
}

‎examples/middleware/app/another/page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function AnotherPage() {
2+
return <h1>Another</h1>;
3+
}

‎examples/middleware/app/layout.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import type { Metadata } from "next";
2+
3+
export default function RootLayout({
4+
children,
5+
}: {
6+
children: React.ReactNode;
7+
}) {
8+
return (
9+
<html lang="en">
10+
<body>{children}</body>
11+
</html>
12+
);
13+
}
14+
15+
export const metadata: Metadata = {
16+
title: "Next.js Middleware example",
17+
description: "Redirect and rewrite pages using Next.js Middleware.",
18+
};

‎examples/middleware/app/page.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import Link from "next/link";
2+
3+
export default function Home() {
4+
return (
5+
<div>
6+
<h1>Index</h1>
7+
<p>
8+
<Link href="/about">Go to about page (will redirect)</Link>
9+
</p>
10+
<p>
11+
<Link href="/another">Go to another page (will rewrite)</Link>
12+
</p>
13+
<p>
14+
<Link href="/about2">Go to about 2 page (no redirect or rewrite)</Link>
15+
</p>
16+
</div>
17+
);
18+
}

‎examples/middleware/app/redirected/page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function RedirectedPage() {
2+
return <h1>Redirected from /about</h1>;
3+
}

‎examples/middleware/app/rewrite/page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function RewritePage() {
2+
return <h1>Rewrite</h1>;
3+
}

‎examples/middleware/middleware.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { NextRequest, NextResponse } from "next/server";
2+
3+
export function middleware(request: NextRequest) {
4+
if (request.nextUrl.pathname === "/about") {
5+
return NextResponse.redirect(new URL("/redirected", request.url));
6+
}
7+
if (request.nextUrl.pathname === "/another") {
8+
return NextResponse.rewrite(new URL("/rewrite", request.url));
9+
}
10+
return NextResponse.next();
11+
}
12+
13+
export const config = {
14+
matcher: ["/about/:path*", "/another/:path*"],
15+
};

0 commit comments

Comments
 (0)