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>
vercel · Jun 20, 2024 · b5f97ca · b5f97ca
1 parent fe0368f
commit b5f97ca
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 40 deletions.
diff --git a/examples/with-sitemap/README.md b/examples/with-sitemap/README.md
@@ -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
 

diff --git a/examples/with-sitemap/pages/contact.js → examples/with-sitemap/app/contact/page.tsx b/examples/with-sitemap/pages/contact.js → examples/with-sitemap/app/contact/page.tsx
@@ -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;

diff --git a/examples/with-sitemap/app/layout.tsx b/examples/with-sitemap/app/layout.tsx
@@ -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>
+  );
+}
diff --git a/examples/with-sitemap/pages/index.js → examples/with-sitemap/app/page.tsx b/examples/with-sitemap/pages/index.js → examples/with-sitemap/app/page.tsx
@@ -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;

diff --git a/examples/with-sitemap/app/sitemap.ts b/examples/with-sitemap/app/sitemap.ts
@@ -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];
+}
diff --git a/examples/with-sitemap/next.config.js b/examples/with-sitemap/next.config.js
@@ -1,10 +1,2 @@
 /** @type {import('next').NextConfig} */
-module.exports = {
-  webpack: (config, { isServer }) => {
-    if (isServer) {
-      require("./scripts/generate-sitemap");
-    }
-
-    return config;
-  },
-};
+module.exports = {};
diff --git a/examples/with-sitemap/package.json b/examples/with-sitemap/package.json
@@ -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"
   }
 }
diff --git a/examples/with-sitemap/public/sitemap.xml b/examples/with-sitemap/public/sitemap.xml
diff --git a/examples/with-sitemap/tsconfig.json b/examples/with-sitemap/tsconfig.json
@@ -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"]
+}