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:
archanaagivale30
GitHub
parent
fe0368f3c9
commit
b5f97ca70e
9 changed files with 80 additions and 40 deletions
|
|
@ -1,6 +1,6 @@
|
|||
# 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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,6 @@
|
|||
import Head from "next/head";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="container">
|
||||
<Head>
|
||||
<title>Create Next App</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
|
||||
<main>
|
||||
<h1 className="title">
|
||||
Welcome to <a href="https://nextjs.org">Next.js!</a>
|
||||
|
|
@ -27,7 +20,7 @@ export default function Home() {
|
|||
</a>
|
||||
</footer>
|
||||
|
||||
<style jsx>{`
|
||||
<style>{`
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding: 0 0.5rem;
|
||||
|
|
@ -109,7 +102,7 @@ export default function Home() {
|
|||
}
|
||||
`}</style>
|
||||
|
||||
<style jsx global>{`
|
||||
<style>{`
|
||||
html,
|
||||
body {
|
||||
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() {
|
||||
return (
|
||||
<div className="container">
|
||||
<Head>
|
||||
<title>Create Next App</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
|
||||
<main>
|
||||
<h1 className="title">
|
||||
Welcome to <a href="https://nextjs.org">Next.js!</a>
|
||||
</h1>
|
||||
|
||||
<p className="description">
|
||||
Get started by editing <code>pages/index.js</code>
|
||||
Get started by editing <code>app/page.tsx</code>
|
||||
</p>
|
||||
|
||||
<div className="grid">
|
||||
|
|
@ -61,7 +54,7 @@ export default function Home() {
|
|||
</a>
|
||||
</footer>
|
||||
|
||||
<style jsx>{`
|
||||
<style>{`
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding: 0 0.5rem;
|
||||
|
|
@ -201,7 +194,7 @@ export default function Home() {
|
|||
}
|
||||
`}</style>
|
||||
|
||||
<style jsx global>{`
|
||||
<style>{`
|
||||
html,
|
||||
body {
|
||||
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} */
|
||||
module.exports = {
|
||||
webpack: (config, { isServer }) => {
|
||||
if (isServer) {
|
||||
require("./scripts/generate-sitemap");
|
||||
}
|
||||
|
||||
return config;
|
||||
},
|
||||
};
|
||||
module.exports = {};
|
||||
|
|
|
|||
|
|
@ -11,6 +11,10 @@
|
|||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"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