A sitemap will give your website pages more visibility on Google Search by defining the relationship between pages.

In this tutorial, I will walk you through how to create a static and dynamic sitemap for your Next JS website.

## Static Sitemap

If you just need a simple sitemap, you can simply create a `sitemap.xml.js` in your pages folder and structure it in the following way:

    <urset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
      <url>
        <loc>https://deolaj.com</loc>
        <changefreq>monthly</changefreq>
        <priority>1.0</priority>
      </url>
      <url>
        <loc>https://deolaj.com/notes</loc>
        <changefreq>monthly</changefreq>
        <priority>1.0</priority>
      </url>
    <urlset>

## Dynamic Sitemap with local pages
To create a dynamic sitemap, first create a `sitemap.js` file anywhere in the root of your project or in the `src` folder.
Then add the `globby` library to your project to get the list of routes:

    yarn add globby --dev

First, to get the page routes, we will use the `globby` package to extract the routes first. We exclude the Next JS default pages (`_app.tsx`, `_document.tsx` etc.), `[slug].tsx`, and `api` pages since they are not important.

    const globby = require('globby');

    const pages = await globby([
      'pages/**/*.tsx',
      '!pages/_*.tsx',
      '!pages/**/[slug].tsx',
      '!pages/api',
    ]);
  Next, we get the current Date:

    const currentDate = new Date().toISOString();

Next, we create the complete sitemap string

    const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
      <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
        ${pages
          .map((page) => {
            const path = page
              .replace('pages', '')
              .replace('.js', '')
              .replace('.tsx', '')
              .replace('.md', '');
            const route = path === '/index' ? '' : path;
            return `
              <url>
                <loc>${`https://deolaj.com${route}`}</loc>
                <lastmod>${currentDate}</lastmod>
                <changefreq>monthly</changefreq>
                <priority>1.0</priority>
              </url>
            `;
          })
          .join('')}
       </urlset>
    `;

Next, write this file to your public folder:

    const fs = require('fs');
    fs.writeFileSync('public/sitemap.xml', sitemap);

Finally, put everything together

    const fs = require('fs');
    const globby = require('globby');

    async function generateSiteMap() {
      const pages = await globby([
        'pages/**/*.tsx',
        '!pages/_*.tsx',
        '!pages/**/[slug].tsx',
        '!pages/api',
      ]);

      const currentDate = new Date().toISOString();

      const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
        <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
          ${pages
            .map((page) => {
              const path = page
                .replace('pages', '')
                .replace('.js', '')
                .replace('.tsx', '')
                .replace('.md', '');
              const route = path === '/index' ? '' : path;
              return `
                <url>
                  <loc>${`https://deolaj.com${route}`}</loc>
                  <lastmod>${currentDate}</lastmod>
                  <changefreq>monthly</changefreq>
                  <priority>1.0</priority>
                </url>
              `;
            })
            .join('')}
        </urlset>
      `;

      fs.writeFileSync('public/sitemap.xml', sitemap);
    }

    generateSiteMap();

## Dynamic Sitemap with remote content

In this example, I will use `contentful` to illustrate how to generate dynamic pages using remote content. E.g blog posts.

First, initialize the contentful client with your space id and access token

    const { createClient } = require('contentful');

    const client = createClient({
      space: process.env.CONTENTFUL_SPACE_ID,
      accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
    });
 Get the posts from contentful and their paths (slug)

    const notePosts = await client
      .getEntries({ content_type: 'notes', order: 'sys.createdAt' })
      .then((response) => {
         // this is a custom utility function I created to extract the posts
         const posts = generateNotePosts(response.items);
         return posts;
    });
    const notePaths = notePosts.map(({ fields: { slug } }) => slug);   

  Next, modify the sitemap string with a new section for remote pages

     ...
     ${notePaths
        .map((route) => {
          return `
            <url>
              <loc>${`https://deolaj.com/notes/${route}`}</loc>
              <lastmod>${currentDate}</lastmod>
              <changefreq>monthly</changefreq>
              <priority>1.0</priority>
            </url>
          `;
        })
        .join('')}
     ...

 Finally, put everything together

    const fs = require('fs');
    const globby = require('globby');
    const { createClient } = require('contentful');

    async function generateSiteMap() {
      const pages = await globby([
        'pages/**/*.tsx',
        '!pages/_*.tsx',
        '!pages/**/[slug].tsx',
        '!pages/api',
      ]);

      const client = createClient({
        space: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      });

      const currentDate = new Date().toISOString();

      const notePosts = await client
      .getEntries({ content_type: 'notes', order: 'sys.createdAt' })
      .then((response) => {
         // this is a custom utility function I created to extract the posts
         const posts = generateNotePosts(response.items);
         return posts;
       });

      const notePaths = notePosts.map(({ fields: { slug } }) => slug);

      const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
        <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
          ${pages
          .map((page) => {
            const path = page
              .replace('pages', '')
              .replace('.js', '')
              .replace('.tsx', '')
              .replace('.md', '');
            const route = path === '/index' ? '' : path;
            return `
              <url>
                <loc>${`https://deolaj.com${route}`}</loc>
                <lastmod>${currentDate}</lastmod>
                <changefreq>monthly</changefreq>
                <priority>1.0</priority>
              </url>
            `;
          })
          .join('')}

          ${notePaths
          .map((route) => {
            return `
              <url>
                <loc>${`https://deolaj.com/notes/${route}`}</loc>
                <lastmod>${currentDate}</lastmod>
                <changefreq>monthly</changefreq>
                <priority>1.0</priority>
              </url>
            `;
          })
          .join('')}
      </urlset>
    `;

      fs.writeFileSync('public/sitemap.xml', sitemap);
    }

    generateSiteMap();

## Putting it together
To ensure that your page is built, add the following to your `next.config.js`

    module.exports = {
      webpack: (config, { isServer }) => {
        if (isServer) {
          // Replace the path below with the `sitemap.js` file location
          require('./src/utils/sitemap');
        }

        return config;
      },
    };

 Run your local server and the sitemap.xml file should appear in your public folder

A short tutorial to create a dynamic sitemap

How to generate a dynamic sitemap for your Next JS website

# Introduction

In this note, we will walkthrough the steps to get started with local development with Github. First we will setup the configuration details, then we will set up the SSH keys.

## Configuration Steps

### Global setup
To set up global variables, open the terminal and run the following:
- Email set up:
    `git config --global user.email "insert your email here"`

- User name set up:
    `git config --global user.name "insert your name here"`

### Local setup
To set up local variables for an individual project,
- Open the terminal
- Navigate to the project folder
- To set the project email, run:
    `git config --local user.email "insert your email here"`

- To set the project user name, run:
    `git config --local user.name "insert your name here"`

To view all settings, run:
    `git config --list`

## Setting up SSH keys

### Generate the SSH keys
1. Open the terminal
2. Navigate to the home directory by running:
    `cd ~/`
3. Generate your SSH key by running:
    `ssh-keygen -t rsa`
4. Follow the prompts and accept the defaults. You can decide whether to create a passphrase, which is requested every time you want to interact with Github (like a password).
5. When you are done, two files will be created `~/.ssh/id_rsa` and `~/.ssh/id_rsa.pub` (this is the public key)
6. To copy your public key to your clipboard, run:
    `pbcopy < ~/.ssh/id_rsa.pub`

### Upload public key to Github
1. Open your browser
2. Login to Github and navigate to [https://github.com/settings/profile](https://github.com/settings/profile "Github Profile")
3. Click on the __SSH and GPG keys__ section on the sidebar
4. Click on the __New SSH key__ button
5. Enter an appropriate title
6. Paste the contents from your clipboard
7. Click the __Add SSH key__ button to save it

You are now set up, and can clone a repository.


Set up configuration and SSH Keys

Setting up local development for Github

# List of VSCode extensions
- __Add Jsdoc comments__: Document code sections
- __Bracket Pair colorizer__: Colors bracket pair for easy redability
- __Eslint__: Works with the `eslint` package to lint files
- __Eva Theme__: Visual theme
- __GitLens__: Assists with Git History
- __MarkdownLint__: Helps to link markdown files
- __Prettier__: Works with the `prettier` package to format files
- __Reactjs Code snippets__: Helps to create and work with code snippets in React
- __Stylelint__: Works with the `stylelint` package to lint CSS files
- __Tailwind CSS IntelliSense__: Works with the `tailwindcss` package to improve working with Tailwind CSS classes
- __Tailwind CSS Autocomplete for Visual Studio Code__: Works with the `tailwindcss` package to add autocomplete for Tailwind CSS classes


Setting up VSCode for Development

List of extensions to install to aid development

List of VSCode extensions

Contact

Are you ready to work with me?