One of the more challenging aspects of running a 

, (single-page application) website is making it more visible to search engines due to their reliance on javascript to present content in the browser. If you look at the flowchart below, you'll see why it can take longer for a SPA-style site to get pages crawled and listed.

If the crawler reaches your page and sees no immediate HTML content, it will send the page to the render queue, meaning it will need to spend additional time and resources to render your page using javascript. Meanwhile, other 

, (server side rendering), sites generate pages that don't require javascript to render content, get indexed directly after being crawled, so they have an SEO advantage. The good news is there have been advancements made in JS platforms to deal with problem, the most popular examples are 

. They can both provide fully rendered content to the browser through hybrid or static rendering. These rendering strategies will ensure the content is picked up by the crawlers and more likely to be indexed right away.

Despite these new amazing platforms, there is still a major SEO gap in my opinion. The one sure fire way to make Google notice your lonely little pages is to present them in a lovely 

file. This is one of the first things Mr. Google Spider looks for when searching your website for content. If there is no sitemap, it relies solely on HTML href links to hop from one page to the next, and this doesn't account for dynamically generated pages that you'd have if you power your website with a CMS or have other api-driven content.

Creating the sitemap isn't that difficult, there are plenty of 

 to follow, and if you have a small amount of pages you can probably create it by hand. However, if you use a CMS to help generate content, you might forget to update the sitemap every time you post something new. And if you already have a lot of content, creating the map by hand might now be too practical.

In this tutorial I'm going to help you create a sitemap using 

, but you could use the code examples and apply it to whichever coding platform you use.

If you're brand-new to Next.js, you might want to pause this tutorial and walk through their 

 to get started. It steps through some of the fundamental building blocks and core Next.js concepts. If you already have a project and want to get right into building the 

The easiest way to get started with Next.js is to run the following in your console:

This will automatically setup a Next.js project in whichever folder you run this from.

Once the packages have finished downloading, you should be able to run your new Next.js app with the following:

If everything is good you should see this in your browser.

The idea with our sitemap is we'll create a new route in our app that will serve up the sitemap when google hits it. In Next.js, this is really easy. We'll be creating a new file in your 

. Here is where we'll be doing the bulk of the work. The core Next.js feature we're going to be using here is 

. This will use node.js to prefetch all the data needed to generate the sitemap before the page is generated. The reason we'll use server-side here is because it will be able to fetch data from your content api to ensure it has all the latest content when Google comes a knockin'.

const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000";

function generateSiteMap(posts) {
  return `<?xml version="1.0" encoding="UTF-8"?>
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
       <loc>${SITE_URL}</loc>
     </url>
   </urlset>
 `;
}

 is using an environment variable to get the full site URL which will eventually reference the production URL. When developing, or if no environment variable is set, it will default to 

The next function is the beginning of our xml file string. We will start with something basic and just insert the static pages we already know about. The first sitemap location we added is just the root of the site 

Below this function, we'll add an empty default component function:

export default function SiteMap() {
  // getServerSideProps will do the heavy lifting
}

Essentially the component doesn't require any internal logic , it will rely solely on the 

 feature we'll create in the next code block.

In this tutorial we'll connect with Storyblok and axios to fetch some content from its api. To make it easy to talk to the api, use npm to install the storyblok js client.

You can use any api content, just keep in mind the shape of our content might be different and you'll need to adapt some of the final code to make it work.

You need to create a new folder in the root directory called 

import StoryblokClient from 'storyblok-js-client'

const Storyblok = new StoryblokClient({
  accessToken: process.env.NEXT_PUBLIC_STORYBLOK_TOKEN,
  cache: {
    clear: 'auto',
    type: 'memory',
  },
})

export const getPostLinks = async () => {
  const result = await Storyblok.get('cdn/links', {
    starts_with: 'posts',
  })
  return result
}

This will create a new Storyblok instance, provide it with a new 

 that will contain your Storyblok api token, and use automatic cache clearing. You can either create a new .env.local file and add the variable to it, or you can export the variable to your console with:

export NEXT_PUBLIC_STORYBLOK_TOKEN=your-storyblok-api-token-here

 Storyblok endpoint which will send minimal amount of data that can be used to generate a sitemap from. We're going to be pulling the 

 file. Now that we have the means to fetch api data, let's use the data to complete the xml formatted string we started earlier. Right below the 

 default function, add a new function called 

export async function getServerSideProps({ res }) {
  const request = await getPostLinks();
  const links = request.data.links;
}

 and saving the links portion of the request to our 

Next we're going to iterate over the returned data and build the rest of our xml string. The 

 endpoint returns an object with the id of the post as keys. The data shape will look something like:

 to walk the returned data and pull out the information we want to use in our xml.

export async function getServerSideProps({ res }) {
  const request = await getPostLinks();
  const links = request.data.links;
  const paths = [];
  Object.keys(links).forEach((linkKey) => {
    if (links[linkKey].is_folder) {
      return;
    }
    const slug = links[linkKey].slug;
    paths.push({ slug });
  });
  
  const sitemap = generateSiteMap(paths);
}

There is a condition that prevents objects with the 

 property from appearing in our xml, those do not map to actual URLs in our example so we don't want it in our sitemap.

Now we'll need to go back and modify our 

 function, to accept the paths data and complete the xml string.

function generateSiteMap(paths) {
  return `<?xml version="1.0" encoding="UTF-8"?>
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
       <loc>${SITE_URL}</loc>
     </url>
     ${paths
       .map(({ slug }) => {
         return `
       <url>
           <loc>${`${SITE_URL}/${slug}`}</loc>
       </url>
     `;
       })
       .join("")}
   </urlset>
 `;
}

 with some object destructuring to pull out the 

 property we're after. The map function will output another xml location with the main URL path followed by the path from the slug. The final 

 function will convert our array to a string.

export async function getServerSideProps({ res }) {
  const request = await getPostLinks();
  const links = request.data.links;
  const paths = [];
  Object.keys(links).forEach((linkKey) => {
    if (links[linkKey].is_folder) {
      return;
    }
    const slug = links[linkKey].slug;
    paths.push({ slug });
  });

  const sitemap = generateSiteMap(paths);

  res.setHeader("Content-Type", "text/xml");
  res.write(sitemap);
  res.end();

  return {
    props: {},
  };
}

What this does is utilizes the node server to output the xml string we created directly to the browser. So now, whenever Google scrapes your sitemap.xml, it will get the most up-to-date map automatically with no extra work on your part. If you point your browser to 

 you should see something like the following:

That just about wraps up this tutorial. I hope you found it useful. You might want to use 

 to verify it can read your sitemap once you have this up on your production site at a URL google can reach. With an automated way of generating your sitemap, you'll be well on your way to greater visibility in Google searches. Happy coding. 

Build a dynamic sitemap.xml for your Next.js app

It had been a few years since I gave my personal website any love. When you code professionally, sometimes you have little left at the end of the day, or evening, to devote to personal projects. The last time I redid my site, I used 

, it was time to give something else a try. I remember thinking how much better I liked Vue, it felt much more natural to be coding in an environment that gracefully coupled template HTML code with JS code. Then right when I finished the first pass, I took a new job and started learning 

Three years later and I'm starting to manage my daily tasks efficiently and have some time for my own projects. I decided it was time to spruce up my site and add some content. I started looking through my Vue code and realized I hadn't committed much of it to memory and I thought it would be easier to redesign my site in React and use some more current tools and best practices I had gained. After a weekend, I had my new site deployed to 

Then I started adding the new content I had planned and wanted to measure any traffic. And that's where I started going down a rabbit hole. In terms of SEO performance, I'd rank a vanilla create-react-app roughly a 

. I think this probably holds true for many JS heavy SPA-style websites, when Google's webcrawler comes a knockin', there's nobody home. Sure you can create a sitemap and submit pages to 

, but if you're site pulls content from an API and renders it in the browser asynchronously, your pages are practically invisible to web crawlers until they get in the render queue which takes considerably longer to process given the amount of web content out there.

Other issues, like page titles and meta tags are not considered in a 

 project, you'll need to develop your own method for handling these if your want them to be unique and SEO-friendly. There are methods described where you dynamically populate the 

 after your content is fetched, but I have my doubts that a web crawler would read the updated tag instead of the whatever it was on the initial page load.

While I was reading up on solutions to fix these problems, I remembered reading about 

 and vaguely recalling that it offered several unique ways to deploy a React-based site, one option is deploying a completely static HTML site. This peaked my interest because I knew a static site with all of its content ready on initial paint would be much more SEO-friendly.

I didn't think too hard about my next steps, they just sort of fell into my lap. I began with looking at the 

 section. The tutorial started walking me through building a new Next.js project, and within minutes I had something up and running in my dev environment. There wasn't too much unfamiliar here if you're coming from a React background. 

The main thing that stuck with me is Next.js has routing built-in. And the way routing works is drastically different than what you're probably used to. Instead of defining routes in a file, the routes are created automatically based on your file hierarchy. Essentially anything you add to the 

 folder in a Next.js app, the route will be created automatically. In my example below, I have posts, projects, and services which correspond to my main navigation. It even has a very simple way to create dynamic routes, say you wanted 

, you would simply create a file under your 

 component, it started to click that Next.js was built with SEO in mind. The Head component allows you to specify 

 tags that should appear on your pages. You may use the component on pages, and if you require a custom title that comes from your api, you can pass that into your head component using a new Next.js convention called 

  which allows you to do cool things like pass in server-based or api data that needs to be available before your page is rendered. 

On my old site, I spent a bit of effort dealing with lazy loading images to improve page performance. Since I use pretty large images for my portfolio section, I wanted to make sure these pages would be usable for people on mobile devices. For this I used a custom React library called 

. This worked pretty well but it was an afterthought and I am really happy to see a site building platform that treats this as a first-class citizen. Next.js Image components handle lazy-loading automatically. They even come with a built-in 

 property that can add a blur effect while the high-res image is downloading. It also requires you to define a height and width which ensures minimal layout shift when your image finishes downloading.Other responsive features are baked in, like on-demand image resizing, even for images stored on remote servers. That is pretty amazing.

These are features that typically take a bit of fiddling with new/existing projects to get it right. However, Next.js has these already part of it's core. You can start a new project with built-in TS support by simply typing in your console 

 or if you have an existing project, type 

 and Next.js will automatically configure typescript to work inside your project. 

With Next.js, you can deploy a site that serves up pages at request time, or serves pre-rendered pages at build time, all under the same app. This gives you lots of flexibility and optimizes site performance. 

Speaking of performance, here's a snapshot of my sites performance after the Next.js redesign taken with Chrome's Lighthouse performance analyzer.

This is a significant improvement over my previous 

 version which scored roughly an 80% performance score before tinkering. I was eventually able to raise it to upper 90s, but that was after adding the 

I did hit a slight snag though. After deploying my new site to Heroku and dealing with some DNS issues, I tested my new site and started to notice the images were downloading slower than what I saw in my development environment. Even worse, I saw my app crash while attempting to fetch these images. I tried many changes including passing in a PORT config variable, but kept seeing my app crash which was unacceptable.

While I wasn't able to resolve my issue on Heroku, I was able to fix it, and enjoy some massive load time improvements by hosting my new site on 

, the makers of Next.js. I was actually really pleasantly surprised by their onboarding experience, which got my new site deployed in minutes, and unlike Heroku, they offer free SSL with free accounts. Vercel specializes in Next.js app hosting and its likely you will see a performance boost if you choose to try them.

Overall I'm really happy with what Next.js brings to the table. For those comfortable with React, it's a no-brainer to give it a try. I think the hardest concept to grasp was the 

 features, but once you understand how these work, you will start to understand what makes Next.js the future of Web coding.

Reasons to Switch from Create React App to Next.js

I joined Genie Life Sciences in it's very early stages as a startup, and have had a very challenging and rewarding experience as the UX Lead, and programming the UI from scratch. The following views showcase the application user interface for controlling the Genie liquid handler, from protocol authoring, instrument fitting, and robotic arm configuration; every aspect provided a unique design challenge. 

Genie Life Sciences User Interface

The Genie marketing website was created to provide equal emphasis on the liquid handler instrument we are building, as well as the automation software that controls it. I was tasked with the visual design, as well as providing all the visual components like the videos and the interactive 

. The website was design as a Wordpress custom theme by an outside contractor, I then heavily modified it to enable additional views which allow users to create demo accounts to test-drive the automation software.

Genie Life Sciences Marketing

Genie Life Sciences

While I was at Cisco, I worked on a small startup project coined Project Lockheart within the organization. The goal was to create a centralized "single pane of glass" to manage all of the security policies that run on Cisco firewall appliances. I played dual roles during my tenure, focusing between UX Design and Frontend development. I managed a weekly UX Guild that served as a platform for UX designers and product managers to discuss current challenges and directives happening throughout Cisco. I also attended many offsites to provide creative input to other groups within the organization. 

Cisco Defense Orchestrator

Punchey’s mission is to help promote, market and advance the trade between local businesses and consumers. Helping buyers find the right sellers and vice versa. Over the years I was asked to create custom landing pages, logo designs, illustrations, and email campaigns for Punchey's online presence. Here are a few examples.

Hello

Recent Projects

What I can do for you

Visual Design

Web Design

Custom Web Experience

Build a dynamic sitemap.xml for your Next.js app

Reasons to Switch from Create React App to Next.js

Get in Touch

Have A Nice Day