use safer method of concatenating absolute URLs

pages/_app.tsx

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { useRouter } from "next/router";
 import { DefaultSeo, SocialProfileJsonLd } from "next-seo";
 import * as Fathom from "fathom-client";
+import urlJoin from "url-join";
 import { ThemeProvider } from "../contexts/ThemeContext";
 import Layout from "../components/Layout";
 import * as config from "../lib/config";
@@ -24,7 +25,7 @@ const App = ({ Component, pageProps }: AppProps) => {
 
   // get this page's URL with full domain, and hack around query parameters and anchors
   // NOTE: this assumes trailing slashes are enabled in next.config.js
-  const canonical = `${config.baseUrl}${router.pathname === "/" ? "" : router.pathname}/`;
+  const canonical = urlJoin(config.baseUrl, router.pathname === "/" ? "" : router.pathname, "/");
 
   useEffect(() => {
     // https://usefathom.com/docs/integrations/next

pages/notes/[slug].tsx

@@ -1,6 +1,7 @@
 import { InView } from "react-intersection-observer";
 import { NextSeo, ArticleJsonLd } from "next-seo";
 import { MDXRemote } from "next-mdx-remote";
+import urlJoin from "url-join";
 import Content from "../../components/Content";
 import NoteMeta from "../../components/NoteMeta";
 import Comments from "../../components/Comments";
@@ -30,7 +31,7 @@ const Note = ({ frontMatter, source }: NoteType) => {
           },
           images: frontMatter.image && [
             {
-              url: `${config.baseUrl}${frontMatter.image}`,
+              url: urlJoin(config.baseUrl, frontMatter.image),
               alt: frontMatter.title,
             },
           ],
@@ -45,7 +46,7 @@ const Note = ({ frontMatter, source }: NoteType) => {
         description={frontMatter.description}
         datePublished={frontMatter.date}
         dateModified={frontMatter.date}
-        images={frontMatter.image && [`${config.baseUrl}${frontMatter.image}`]}
+        images={frontMatter.image && [urlJoin(config.baseUrl, frontMatter.image)]}
         {...articleJsonLd}
       />
 

pages/sitemap.xml.ts

@@ -1,4 +1,5 @@
 import { getServerSideSitemap } from "next-sitemap";
+import urlJoin from "url-join";
 import { getAllNotes } from "../lib/helpers/parse-notes";
 import { baseUrl } from "../lib/config";
 import { RELEASE_DATE } from "../lib/config/constants";
@@ -33,7 +34,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   const notes = getAllNotes();
   notes.map((note) =>
     pages.push({
-      loc: `/notes/${note.slug}/`,
+      loc: urlJoin("/notes/", note.slug, "/"),
       // pull lastMod from front matter date
       lastmod: new Date(note.date).toISOString(),
       priority: 0.7,
@@ -41,7 +42,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   );
 
   // make all relative URLs absolute
-  pages.map((page) => (page.loc = `${baseUrl}${page.loc}`));
+  pages.map((page) => (page.loc = urlJoin(baseUrl, page.loc)));
 
   // cache on edge for 12 hours
   const { res } = context;