From cc541fb25260f7315d3e223d368cfad80c99f25a Mon Sep 17 00:00:00 2001 From: Arsalan Khattak <37709578+eKhattak@users.noreply.github.com> Date: Fri, 24 Jul 2020 21:35:39 +0500 Subject: [PATCH] Add Sitemap Example (#15047) * Add with-sitemap Example * Update README * Update examples/with-sitemap/scripts/generate-sitemap.js Co-authored-by: Luis Alvarez D. * Update examples/with-sitemap/package.json Co-authored-by: Luis Alvarez D. * Update examples/with-sitemap/public/sitemap.xml Co-authored-by: Luis Alvarez D. * Update README * Add .env Info to README * Update examples/with-sitemap/README.md Co-authored-by: Luis Alvarez D. * Update examples/with-sitemap/README.md Co-authored-by: Luis Alvarez D. * Update examples/with-sitemap/README.md Co-authored-by: Luis Alvarez D. * Update examples/with-sitemap/README.md Co-authored-by: Luis Alvarez D. Co-authored-by: Luis Alvarez D. --- examples/with-sitemap/.env | 2 + examples/with-sitemap/README.md | 51 +++++ examples/with-sitemap/next.config.js | 9 + examples/with-sitemap/package.json | 18 ++ examples/with-sitemap/pages/contact.js | 128 +++++++++++ examples/with-sitemap/pages/index.js | 209 ++++++++++++++++++ examples/with-sitemap/public/favicon.ico | Bin 0 -> 15086 bytes examples/with-sitemap/public/sitemap.xml | 10 + examples/with-sitemap/public/vercel.svg | 4 + .../with-sitemap/scripts/generate-sitemap.js | 28 +++ 10 files changed, 459 insertions(+) create mode 100644 examples/with-sitemap/.env create mode 100644 examples/with-sitemap/README.md create mode 100644 examples/with-sitemap/next.config.js create mode 100644 examples/with-sitemap/package.json create mode 100644 examples/with-sitemap/pages/contact.js create mode 100644 examples/with-sitemap/pages/index.js create mode 100644 examples/with-sitemap/public/favicon.ico create mode 100644 examples/with-sitemap/public/sitemap.xml create mode 100644 examples/with-sitemap/public/vercel.svg create mode 100644 examples/with-sitemap/scripts/generate-sitemap.js diff --git a/examples/with-sitemap/.env b/examples/with-sitemap/.env new file mode 100644 index 0000000000..8d8ccb6fca --- /dev/null +++ b/examples/with-sitemap/.env @@ -0,0 +1,2 @@ +# Used to add the domain to sitemap.xml, replace it with a real domain in production +WEBSITE_URL=http://localhost:3000 \ No newline at end of file diff --git a/examples/with-sitemap/README.md b/examples/with-sitemap/README.md new file mode 100644 index 0000000000..a6d6d7b56b --- /dev/null +++ b/examples/with-sitemap/README.md @@ -0,0 +1,51 @@ +# 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. + +## 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/hello-world) + +## How to use + +### Using `create-next-app` + +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-sitemap with-sitemap-app +# or +yarn create next-app --example with-sitemap with-sitemap-app +``` + +### Download manually + +Download the example: + +```bash +curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-sitemap +cd with-sitemap +``` + +Install it and run: + +```bash +npm install +npm run dev +# or +yarn +yarn dev +``` + +Your app should be up and running on [http://localhost:3000](http://localhost:3000) and the sitemap should now be available in [http://localhost:3000/sitemap.xml](http://localhost:3000/sitemap.xml)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions). + +To change the website URL used by `sitemap.xml`, open the file `.env` and change the `WEBSITE_URL` environment variable: + +```bash +# Used to add the domain to sitemap.xml, replace it with a real domain in production +WEBSITE_URL=https://my-domain.com +``` + +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-sitemap/next.config.js b/examples/with-sitemap/next.config.js new file mode 100644 index 0000000000..08a972d01c --- /dev/null +++ b/examples/with-sitemap/next.config.js @@ -0,0 +1,9 @@ +module.exports = { + webpack: (config, { isServer }) => { + if (isServer) { + require('./scripts/generate-sitemap') + } + + return config + }, +} diff --git a/examples/with-sitemap/package.json b/examples/with-sitemap/package.json new file mode 100644 index 0000000000..beb83580fa --- /dev/null +++ b/examples/with-sitemap/package.json @@ -0,0 +1,18 @@ +{ + "name": "with-sitemap", + "version": "0.1.0", + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "next": "latest", + "react": "^16.13.1", + "react-dom": "^16.13.1" + }, + "devDependencies": { + "globby": "^11.0.1" + }, + "license": "MIT" +} diff --git a/examples/with-sitemap/pages/contact.js b/examples/with-sitemap/pages/contact.js new file mode 100644 index 0000000000..0d718f02d5 --- /dev/null +++ b/examples/with-sitemap/pages/contact.js @@ -0,0 +1,128 @@ +import Head from 'next/head' + +export default function Home() { + return ( +
+ + Create Next App + + + +
+

+ Welcome to Next.js! +

+ +

Contact Page

+
+ + + + + + +
+ ) +} diff --git a/examples/with-sitemap/pages/index.js b/examples/with-sitemap/pages/index.js new file mode 100644 index 0000000000..1379c5f92d --- /dev/null +++ b/examples/with-sitemap/pages/index.js @@ -0,0 +1,209 @@ +import Head from 'next/head' + +export default function Home() { + return ( +
+ + Create Next App + + + +
+

+ Welcome to Next.js! +

+ +

+ Get started by editing pages/index.js +

+ + +
+ + + + + + +
+ ) +} diff --git a/examples/with-sitemap/public/favicon.ico b/examples/with-sitemap/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..4965832f2c9b0605eaa189b7c7fb11124d24e48a GIT binary patch literal 15086 zcmeHOOH5Q(7(R0cc?bh2AT>N@1PWL!LLfZKyG5c!MTHoP7_p!sBz0k$?pjS;^lmgJ zU6^i~bWuZYHL)9$wuvEKm~qo~(5=Lvx5&Hv;?X#m}i|`yaGY4gX+&b>tew;gcnRQA1kp zBbm04SRuuE{Hn+&1wk%&g;?wja_Is#1gKoFlI7f`Gt}X*-nsMO30b_J@)EFNhzd1QM zdH&qFb9PVqQOx@clvc#KAu}^GrN`q5oP(8>m4UOcp`k&xwzkTio*p?kI4BPtIwX%B zJN69cGsm=x90<;Wmh-bs>43F}ro$}Of@8)4KHndLiR$nW?*{Rl72JPUqRr3ta6e#A z%DTEbi9N}+xPtd1juj8;(CJt3r9NOgb>KTuK|z7!JB_KsFW3(pBN4oh&M&}Nb$Ee2 z$-arA6a)CdsPj`M#1DS>fqj#KF%0q?w50GN4YbmMZIoF{e1yTR=4ablqXHBB2!`wM z1M1ke9+<);|AI;f=2^F1;G6Wfpql?1d5D4rMr?#f(=hkoH)U`6Gb)#xDLjoKjp)1;Js@2Iy5yk zMXUqj+gyk1i0yLjWS|3sM2-1ECc;MAz<4t0P53%7se$$+5Ex`L5TQO_MMXXi04UDIU+3*7Ez&X|mj9cFYBXqM{M;mw_ zpw>azP*qjMyNSD4hh)XZt$gqf8f?eRSFX8VQ4Y+H3jAtvyTrXr`qHAD6`m;aYmH2zOhJC~_*AuT} zvUxC38|JYN94i(05R)dVKgUQF$}#cxV7xZ4FULqFCNX*Forhgp*yr6;DsIk=ub0Hv zpk2L{9Q&|uI^b<6@i(Y+iSxeO_n**4nRLc`P!3ld5jL=nZRw6;DEJ*1z6Pvg+eW|$lnnjO zjd|8>6l{i~UxI244CGn2kK@cJ|#ecwgSyt&HKA2)z zrOO{op^o*- + + http://localhost:3000/contact + hourly + + + http://localhost:3000 + hourly + + \ No newline at end of file diff --git a/examples/with-sitemap/public/vercel.svg b/examples/with-sitemap/public/vercel.svg new file mode 100644 index 0000000000..fbf0e25a65 --- /dev/null +++ b/examples/with-sitemap/public/vercel.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/examples/with-sitemap/scripts/generate-sitemap.js b/examples/with-sitemap/scripts/generate-sitemap.js new file mode 100644 index 0000000000..4bd49377b2 --- /dev/null +++ b/examples/with-sitemap/scripts/generate-sitemap.js @@ -0,0 +1,28 @@ +const fs = require('fs') +const globby = require('globby') + +function addPage(page) { + const path = page.replace('pages', '').replace('.js', '').replace('.mdx', '') + const route = path === '/index' ? '' : path + + return ` + ${`${process.env.WEBSITE_URL}${route}`} + hourly + ` +} + +async function generateSitemap() { + // Ignore Next.js specific files (e.g., _app.js) and API routes. + const pages = await globby([ + 'pages/**/*{.js,.mdx}', + '!pages/_*.js', + '!pages/api', + ]) + const sitemap = ` +${pages.map(addPage).join('\n')} +` + + fs.writeFileSync('public/sitemap.xml', sitemap) +} + +generateSitemap() -- GitLab