Updated with-sitemap example for App Router (#66995)
Hello This PR updates the with-sitemap example to use: 1. App Router 2. TypeScript 3. sitemap.js --------- Co-authored-by: Sam Ko <sam@vercel.com>
This commit is contained in:
parent
fe0368f3c9
commit
b5f97ca70e
9 changed files with 80 additions and 40 deletions
|
@ -1,6 +1,6 @@
|
||||||
# With Sitemap example
|
# With Sitemap example
|
||||||
|
|
||||||
This example shows how to generate a `sitemap.xml` file based on the pages in your [Next.js](https://nextjs.org/) app. The sitemap will be generated and saved in the `public` directory after starting the development server or by making a build.
|
This example shows how to generate a `sitemap.xml` file based on the pages in your [Next.js](https://nextjs.org/) app.
|
||||||
|
|
||||||
## Deploy your own
|
## Deploy your own
|
||||||
|
|
||||||
|
|
|
@ -1,13 +1,6 @@
|
||||||
import Head from "next/head";
|
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<Head>
|
|
||||||
<title>Create Next App</title>
|
|
||||||
<link rel="icon" href="/favicon.ico" />
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<h1 className="title">
|
<h1 className="title">
|
||||||
Welcome to <a href="https://nextjs.org">Next.js!</a>
|
Welcome to <a href="https://nextjs.org">Next.js!</a>
|
||||||
|
@ -27,7 +20,7 @@ export default function Home() {
|
||||||
</a>
|
</a>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<style jsx>{`
|
<style>{`
|
||||||
.container {
|
.container {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
padding: 0 0.5rem;
|
padding: 0 0.5rem;
|
||||||
|
@ -109,7 +102,7 @@ export default function Home() {
|
||||||
}
|
}
|
||||||
`}</style>
|
`}</style>
|
||||||
|
|
||||||
<style jsx global>{`
|
<style>{`
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
padding: 0;
|
padding: 0;
|
19
examples/with-sitemap/app/layout.tsx
Normal file
19
examples/with-sitemap/app/layout.tsx
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
export const metadata = {
|
||||||
|
title: "Create Next App",
|
||||||
|
description: "Generated by Next.js",
|
||||||
|
icons: {
|
||||||
|
icon: "/favicon.ico",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: Readonly<{
|
||||||
|
children: React.ReactNode;
|
||||||
|
}>) {
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<body>{children}</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
|
@ -1,20 +1,13 @@
|
||||||
import Head from "next/head";
|
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<Head>
|
|
||||||
<title>Create Next App</title>
|
|
||||||
<link rel="icon" href="/favicon.ico" />
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<h1 className="title">
|
<h1 className="title">
|
||||||
Welcome to <a href="https://nextjs.org">Next.js!</a>
|
Welcome to <a href="https://nextjs.org">Next.js!</a>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<p className="description">
|
<p className="description">
|
||||||
Get started by editing <code>pages/index.js</code>
|
Get started by editing <code>app/page.tsx</code>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="grid">
|
<div className="grid">
|
||||||
|
@ -61,7 +54,7 @@ export default function Home() {
|
||||||
</a>
|
</a>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<style jsx>{`
|
<style>{`
|
||||||
.container {
|
.container {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
padding: 0 0.5rem;
|
padding: 0 0.5rem;
|
||||||
|
@ -201,7 +194,7 @@ export default function Home() {
|
||||||
}
|
}
|
||||||
`}</style>
|
`}</style>
|
||||||
|
|
||||||
<style jsx global>{`
|
<style>{`
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
padding: 0;
|
padding: 0;
|
24
examples/with-sitemap/app/sitemap.ts
Normal file
24
examples/with-sitemap/app/sitemap.ts
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
const globby = require("globby");
|
||||||
|
|
||||||
|
function addPage(page: string) {
|
||||||
|
const path = page
|
||||||
|
.replace("app", "")
|
||||||
|
.replace(".tsx", "")
|
||||||
|
.replace(".mdx", "")
|
||||||
|
.replace("/page", "");
|
||||||
|
return path;
|
||||||
|
}
|
||||||
|
export default async function sitemap() {
|
||||||
|
const pages = await globby([
|
||||||
|
"app/**/*{.js,jsx,ts,tsx,.mdx}",
|
||||||
|
"!app/_*.js",
|
||||||
|
"!app/{sitemap,layout}.{js,jsx,ts,tsx}",
|
||||||
|
"!app/api",
|
||||||
|
]);
|
||||||
|
const routes = pages.map((page: string) => ({
|
||||||
|
url: `${process.env.WEBSITE_URL}${addPage(page)}`,
|
||||||
|
lastModified: new Date().toISOString(),
|
||||||
|
}));
|
||||||
|
|
||||||
|
return [...routes];
|
||||||
|
}
|
|
@ -1,10 +1,2 @@
|
||||||
/** @type {import('next').NextConfig} */
|
/** @type {import('next').NextConfig} */
|
||||||
module.exports = {
|
module.exports = {};
|
||||||
webpack: (config, { isServer }) => {
|
|
||||||
if (isServer) {
|
|
||||||
require("./scripts/generate-sitemap");
|
|
||||||
}
|
|
||||||
|
|
||||||
return config;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
|
@ -11,6 +11,10 @@
|
||||||
"react-dom": "^18.2.0"
|
"react-dom": "^18.2.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"globby": "^11.0.1"
|
"globby": "^11.0.1",
|
||||||
|
"@types/node": "^18.11.5",
|
||||||
|
"@types/react": "^18.0.23",
|
||||||
|
"@types/react-dom": "^18.0.7",
|
||||||
|
"typescript": "^4.8.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +0,0 @@
|
||||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
|
||||||
<url>
|
|
||||||
<loc>http://localhost:3000/contact</loc>
|
|
||||||
<changefreq>hourly</changefreq>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>http://localhost:3000</loc>
|
|
||||||
<changefreq>hourly</changefreq>
|
|
||||||
</url>
|
|
||||||
</urlset>
|
|
25
examples/with-sitemap/tsconfig.json
Normal file
25
examples/with-sitemap/tsconfig.json
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
Loading…
Reference in a new issue