add previous/next nav buttons

gatsby/create-pages.js

@@ -7,10 +7,16 @@ module.exports = async ({ graphql, actions, reporter }) => {
     query {
       allChaptersJson {
         edges {
+          previous {
+            id
+          }
           node {
             slug
             id
           }
+          next {
+            id
+          }
         }
       }
     }
@@ -21,15 +27,22 @@ module.exports = async ({ graphql, actions, reporter }) => {
   }
 
   // Create a page for each chapter
-  const pages = result.data.allChaptersJson.edges;
+  const chapters = result.data.allChaptersJson.edges;
 
-  pages.forEach(({ node }) => {
-    createPage({
-      path: `/${node.slug}/`,
-      component: path.resolve(`./src/layouts/ChapterLayout.js`),
-      context: {
-        id: node.id,
-      },
+  if (chapters.length > 0) {
+    chapters.forEach(({ previous, node, next }) => {
+      const previousId = previous === null ? null : previous.id;
+      const nextId = next === null ? null : next.id;
+
+      createPage({
+        path: `/${node.slug}/`,
+        component: path.resolve(`./src/layouts/ChapterLayout.js`),
+        context: {
+          id: node.id,
+          previousId,
+          nextId,
+        },
+      });
     });
-  });
+  }
 };

src/components/PrevNextButtons.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Link } from 'gatsby';
+
+const PrevNextButtons = ({ previous, next }) => {
+  return (
+    <section className="not-prose w-full flex justify-between">
+      <div>
+        {previous && (
+          <Link to={`/${previous.slug}/`} className="group block">
+            <p className="text-gray-500">Previous Chapter</p>
+            <span className="text-lg font-semibold group-hover:underline">
+              ← {previous.title}
+            </span>
+          </Link>
+        )}
+      </div>
+      <div>
+        {next && (
+          <Link to={`/${next.slug}/`} className="group block text-right">
+            <p className="text-gray-500">Next Chapter</p>
+            <span className="text-lg font-semibold group-hover:underline">
+              {next.title} →
+            </span>
+          </Link>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default PrevNextButtons;

src/layouts/ChapterLayout.js

@@ -8,6 +8,7 @@ import { parseContent } from '../utils/parseContent';
 import Layout from '../components/Layout';
 import ChapterNav from '../components/ChapterNav';
 import TableOfContents from '../components/TableOfContents';
+import PrevNextButtons from '../components/PrevNextButtons';
 import Image from '../components/Image';
 import Example from '../components/Example';
 
@@ -25,7 +26,7 @@ const renderAst = (ast) => {
 };
 
 export default function ChapterLayout({ data }) {
-  const { chaptersJson: chapter } = data;
+  const { chapter, previous, next } = data;
 
   const { ast, toc } = parseContent({
     html: chapter.src.fields.html,
@@ -42,6 +43,10 @@ export default function ChapterLayout({ data }) {
         <div className="lg:pl-[15em]">
           <main className="max-w-3xl xl:mr-[17em] prose mx-auto overflow-hidden py-8">
             {renderAst(ast)}
+
+            <hr />
+
+            <PrevNextButtons previous={previous} next={next} />
           </main>
 
           <aside className="fixed z-10 top-[5em] bottom-0 right-[max(0px,calc(50%-40rem))] overflow-y-auto hidden xl:block max-w-[15em] w-full">
@@ -54,8 +59,8 @@ export default function ChapterLayout({ data }) {
 }
 
 export const query = graphql`
-  query ChapterById($id: String!) {
-    chaptersJson(id: { eq: $id }) {
+  query ChapterById($id: String!, $previousId: String, $nextId: String) {
+    chapter: chaptersJson(id: { eq: $id }) {
       id
       slug
       title
@@ -71,5 +76,13 @@ export const query = graphql`
         }
       }
     }
+    previous: chaptersJson(id: { eq: $previousId }) {
+      slug
+      title
+    }
+    next: chaptersJson(id: { eq: $nextId }) {
+      slug
+      title
+    }
   }
 `;