From 17aa4b458eea66253aa7fbd24b99ef11386e22d3 Mon Sep 17 00:00:00 2001 From: Vishnu Sankar <4602725+iamvishnusankar@users.noreply.github.com> Date: Tue, 18 Aug 2020 09:46:42 +0530 Subject: [PATCH] Added next-sitemap example (#15997) Co-authored-by: Luis Alvarez --- examples/with-next-sitemap/README.md | 23 ++++++++++++ examples/with-next-sitemap/next-env.d.ts | 2 ++ examples/with-next-sitemap/next-sitemap.js | 12 +++++++ examples/with-next-sitemap/package.json | 21 +++++++++++ .../with-next-sitemap/pages/[dynamic].tsx | 34 ++++++++++++++++++ examples/with-next-sitemap/pages/index.tsx | 36 +++++++++++++++++++ examples/with-next-sitemap/tsconfig.json | 19 ++++++++++ 7 files changed, 147 insertions(+) create mode 100644 examples/with-next-sitemap/README.md create mode 100644 examples/with-next-sitemap/next-env.d.ts create mode 100644 examples/with-next-sitemap/next-sitemap.js create mode 100644 examples/with-next-sitemap/package.json create mode 100644 examples/with-next-sitemap/pages/[dynamic].tsx create mode 100644 examples/with-next-sitemap/pages/index.tsx create mode 100644 examples/with-next-sitemap/tsconfig.json diff --git a/examples/with-next-sitemap/README.md b/examples/with-next-sitemap/README.md new file mode 100644 index 0000000000..7f8bc3274e --- /dev/null +++ b/examples/with-next-sitemap/README.md @@ -0,0 +1,23 @@ +# next-sitemap example + +This example uses [`next-sitemap`](https://github.com/iamvishnusankar/next-sitemap) to generate a sitemap file for all pages (including all pre-rendered/static pages). + +`next-sitemap` allows the generation of sitemaps along with `robots.txt` and provides the feature to split large sitemaps into multiple files. Checkout the [`next-sitemap` documentation](https://github.com/iamvishnusankar/next-sitemap) to learn more. + +## Deploy your own + +Deploy the example using [Vercel](https://vercel.com): + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-next-sitemap) + +## How to use + +Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: + +```bash +npx create-next-app --example with-next-sitemap with-next-sitemap-app +# or +yarn create next-app --example with-next-sitemap with-next-sitemap-app +``` + +Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-next-sitemap/next-env.d.ts b/examples/with-next-sitemap/next-env.d.ts new file mode 100644 index 0000000000..7b7aa2c772 --- /dev/null +++ b/examples/with-next-sitemap/next-env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/examples/with-next-sitemap/next-sitemap.js b/examples/with-next-sitemap/next-sitemap.js new file mode 100644 index 0000000000..79a7b9c6f3 --- /dev/null +++ b/examples/with-next-sitemap/next-sitemap.js @@ -0,0 +1,12 @@ +module.exports = { + siteUrl: 'https://example.com', + generateRobotsTxt: true, + // optional + robotsTxtOptions: { + additionalSitemaps: [ + 'https://example.com/my-custom-sitemap-1.xml', + 'https://example.com/my-custom-sitemap-2.xml', + 'https://example.com/my-custom-sitemap-3.xml', + ], + }, +} diff --git a/examples/with-next-sitemap/package.json b/examples/with-next-sitemap/package.json new file mode 100644 index 0000000000..3eabaec079 --- /dev/null +++ b/examples/with-next-sitemap/package.json @@ -0,0 +1,21 @@ +{ + "name": "with-next-sitemap", + "version": "1.0.0", + "license": "MIT", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start", + "postbuild": "next-sitemap" + }, + "dependencies": { + "next": "latest", + "react": "^16.13.1", + "react-dom": "^16.13.1" + }, + "devDependencies": { + "@types/node": "14.6.0", + "@types/react": "^16.9.45", + "next-sitemap": "latest" + } +} diff --git a/examples/with-next-sitemap/pages/[dynamic].tsx b/examples/with-next-sitemap/pages/[dynamic].tsx new file mode 100644 index 0000000000..1847e6aba2 --- /dev/null +++ b/examples/with-next-sitemap/pages/[dynamic].tsx @@ -0,0 +1,34 @@ +import { GetStaticPaths, GetStaticProps } from 'next' +import { useRouter } from 'next/router' + +const DynamicPage = () => { + const { query } = useRouter() + + return ( +
+

Dynamic Page

+

Query: {query.dynamic}

+
+ ) +} + +export const getStaticProps: GetStaticProps = async () => { + return { + props: { + dynamic: 'hello', + }, + } +} + +export const getStaticPaths: GetStaticPaths = async () => { + return { + paths: [...Array(10000)].map((_, index) => ({ + params: { + dynamic: `page-${index}`, + }, + })), + fallback: false, + } +} + +export default DynamicPage diff --git a/examples/with-next-sitemap/pages/index.tsx b/examples/with-next-sitemap/pages/index.tsx new file mode 100644 index 0000000000..0b46074eb6 --- /dev/null +++ b/examples/with-next-sitemap/pages/index.tsx @@ -0,0 +1,36 @@ +import Link from 'next/link' + +const HelloWorld = () => ( +
+

Hello World Page

+
    +
  1. + + Link to dynamic page 1 + +
    2. +
  2. + + Link to dynamic page 2 + +
    3. +
  3. + + Link to dynamic page 3 + +
    4. +
  4. + + Link to dynamic page 4 + +
    5. +
  5. + + Link to dynamic page 5 + +
    6. +
+
+) + +export default HelloWorld diff --git a/examples/with-next-sitemap/tsconfig.json b/examples/with-next-sitemap/tsconfig.json new file mode 100644 index 0000000000..93a83a407c --- /dev/null +++ b/examples/with-next-sitemap/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": false, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve" + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +}