Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Sitemap Example #15047

Merged
merged 11 commits into from
Jul 24, 2020
Merged
2 changes: 2 additions & 0 deletions examples/with-sitemap/.env
Original file line number Diff line number Diff line change
@@ -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
50 changes: 50 additions & 0 deletions examples/with-sitemap/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
# 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
```
khattakdev marked this conversation as resolved.
Show resolved Hide resolved
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)).
khattakdev marked this conversation as resolved.
Show resolved Hide resolved
9 changes: 9 additions & 0 deletions examples/with-sitemap/next.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
module.exports = {
webpack: (config, { isServer }) => {
if (isServer) {
require('./scripts/generate-sitemap')
}

return config
},
}
18 changes: 18 additions & 0 deletions examples/with-sitemap/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
128 changes: 128 additions & 0 deletions examples/with-sitemap/pages/contact.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
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">Contact Page</p>
</main>

<footer>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<img src="/vercel.svg" alt="Vercel Logo" className="logo" />
</a>
</footer>

<style jsx>{`
.container {
min-height: 100vh;
padding: 0 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

main {
padding: 5rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

footer {
width: 100%;
height: 100px;
border-top: 1px solid #eaeaea;
display: flex;
justify-content: center;
align-items: center;
}

footer img {
margin-left: 0.5rem;
}

footer a {
display: flex;
justify-content: center;
align-items: center;
}

a {
color: inherit;
text-decoration: none;
}

.title a {
color: #0070f3;
text-decoration: none;
}

.title a:hover,
.title a:focus,
.title a:active {
text-decoration: underline;
}

.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
}

.title,
.description {
text-align: center;
}

.description {
line-height: 1.5;
font-size: 1.5rem;
}

.logo {
height: 1em;
}

@media (max-width: 600px) {
.grid {
width: 100%;
flex-direction: column;
}
}
`}</style>

<style jsx global>{`
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
sans-serif;
}

* {
box-sizing: border-box;
}
`}</style>
</div>
)
}
Loading