Skip to content

Commit 064a524

Browse files
Sam-Phillemon9493samcx
Sam-Phillemon9493
and
samcx
authored
Examples: Updated the example of headers to utilize the App Router (#67920)
This PR updates the headers example to use the App Router. Here are the changes that have been made: - Renamed the "pages" folder to the "app" folder. - Updated the routing for `/`, `/about`, and `/news/[...slug]` files to align with the App Router. - Added the layout.tsx file as part of the App Router. - Updated the `package.json` file. - Updated the Readme file. cc @samcx --------- Co-authored-by: samcx <[email protected]>
1 parent 76b9e52 commit 064a524

File tree

7 files changed

+41
-24
lines changed

7 files changed

+41
-24
lines changed

‎examples/headers/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# Headers Example
22

3-
This example shows how to use [headers in Next.js](https://nextjs.org/docs/api-reference/next.config.js/headers) to add custom HTTP headers into your Next.js app.
3+
This example shows how to use [headers in Next.js](https://nextjs.org/docs/app/api-reference/next-config-js/headers) to add custom HTTP headers into your Next.js app.
44

5-
The index page ([`pages/index.js`](pages/index.js)) has a list of links to pages with custom headers set up in [`next.config.js`](next.config.js). Run or deploy the app to see how it works!
5+
The index page ([`app/page.tsx`](app/page.tsx)) has a list of links to pages with custom headers set up in [`next.config.js`](next.config.js). Run or deploy the app to see how it works!
66

77
## Deploy your own
88

‎examples/headers/components/Code.tsx renamed to ‎examples/headers/app/_components/Code.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import styles from "../styles.module.css";
1+
import styles from "/styles.module.css";
22

33
type CodeProps = {
44
children: React.ReactNode;

‎examples/headers/pages/about.tsx renamed to ‎examples/headers/app/about/page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Link from "next/link";
2-
import styles from "../styles.module.css";
3-
import Code from "../components/Code";
2+
import styles from "/styles.module.css";
3+
import Code from "../_components/Code";
44

55
export default function About() {
66
return (

‎examples/headers/app/layout.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export const metadata = {
2+
title: "Next.js",
3+
description: "Generated by Next.js",
4+
};
5+
6+
export default function RootLayout({
7+
children,
8+
}: {
9+
children: React.ReactNode;
10+
}) {
11+
return (
12+
<html lang="en">
13+
<body>{children}</body>
14+
</html>
15+
);
16+
}

‎examples/headers/pages/news/[...slug].tsx renamed to ‎examples/headers/app/news/[...slug]/page.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
import { useRouter } from "next/router";
21
import Link from "next/link";
3-
import styles from "../../styles.module.css";
4-
import Code from "../../components/Code";
2+
import styles from "/styles.module.css";
3+
import Code from "../../_components/Code";
54

6-
export default function News() {
7-
const { asPath } = useRouter();
5+
type NewsProps = {
6+
params: { slug: [] };
7+
};
88

9+
export default function News({ params }: NewsProps) {
910
return (
1011
<div className={styles.container}>
1112
<div className={styles.card}>
12-
<h1>Path: {asPath}</h1>
13+
<h1>Path: {`/news/${params.slug.join("/")}`}</h1>
1314
<hr className={styles.hr} />
1415
<p>
1516
The response contains a custom header{" "}

‎examples/headers/pages/index.tsx renamed to ‎examples/headers/app/page.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Link from "next/link";
2-
import styles from "../styles.module.css";
3-
import Code from "../components/Code";
2+
import styles from "/styles.module.css";
3+
import Code from "./_components/Code";
44

55
export default function Index() {
66
return (
@@ -11,21 +11,21 @@ export default function Index() {
1111
<p>
1212
The links below are examples of{" "}
1313
<Link
14-
href="https://nextjs.org/docs/api-reference/next.config.js/headers"
14+
href="https://nextjs.org/docs/app/api-reference/next-config-js/headers"
1515
legacyBehavior
1616
>
17-
<>
17+
<span>
1818
custom <Code>headers</Code>
19-
</>
19+
</span>
2020
</Link>{" "}
2121
added to your Next.js app.
2222
</p>
2323
<nav>
2424
<ul className={styles.list}>
2525
<li>
26-
<a href="/about">
26+
<Link href="/about">
2727
Visit /about (it contains a X-About-Custom-Header)
28-
</a>
28+
</Link>
2929
</li>
3030
<li>
3131
<Link href="/news/123">

‎examples/headers/package.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@
77
},
88
"dependencies": {
99
"next": "latest",
10-
"react": "^18.2.0",
11-
"react-dom": "^18.2.0"
10+
"react": "^18.3.1",
11+
"react-dom": "^18.3.1"
1212
},
1313
"devDependencies": {
14-
"@types/node": "^18.11.5",
15-
"@types/react": "^18.0.23",
16-
"@types/react-dom": "^18.0.7",
17-
"typescript": "^4.8.4"
14+
"@types/node": "^18.14.11",
15+
"@types/react": "^18.3.3",
16+
"@types/react-dom": "^18.3.0",
17+
"typescript": "^5.5.3"
1818
}
1919
}

0 commit comments

Comments
 (0)