Automatically generate "Read Next" link

website/meta/languageSorted.tsx

@@ -0,0 +1,5 @@
+import models from './languages.json'
+
+export const languagesSorted = models.languages
+    .filter(({ models }) => models && models.length)
+    .sort((a, b) => a.name.localeCompare(b.name))

website/meta/sidebarFlat.tsx

@@ -0,0 +1,5 @@
+import sidebars from './sidebars.json'
+
+export const sidebarUsageFlat = sidebars
+    .find((sidebar) => sidebar.section === 'usage')
+    .items.flatMap((item) => item.items)

website/pages/[...listPathPage].tsx

@@ -7,6 +7,7 @@ import Layout from '../src/templates'
 import remarkPlugins from '../plugins/index.mjs'
 
 import recordSection from '../meta/recordSections'
+import { sidebarUsageFlat } from '../meta/sidebarFlat'
 
 type ApiDetails = {
     stringName: string | null
@@ -117,16 +118,32 @@ export const getStaticProps: GetStaticProps<PropsPage, ParsedUrlQuery> = async (
         trainable: mdx.frontmatter.api_trainable ?? null,
     }
 
+    const slug = `/${args.params.listPathPage.join('/')}`
+
+    const next =
+        section === 'usage'
+            ? sidebarUsageFlat.find(
+                  (item, index) =>
+                      index > 0 && sidebarUsageFlat[index - 1].url === slug && item[0] === '/'
+              )
+            : undefined
+
     return {
         props: {
             ...mdx.frontmatter,
-            slug: `/${args.params.listPathPage.join('/')}`,
+            slug,
             mdx,
             sectionTitle: sectionMeta?.title ?? null,
             theme: sectionMeta?.theme ?? null,
             section: section,
             apiDetails: apiDetails,
             isIndex,
+            next: next
+                ? {
+                      slug: next.url,
+                      title: next.text,
+                  }
+                : null,
         },
     }
 }

website/pages/models/[slug].tsx

@@ -4,6 +4,7 @@ import recordSection from '../../meta/recordSections'
 import recordLanguages from '../../meta/recordLanguages'
 import Layout from '../../src/templates'
 import { PropsPageBase } from '../[...listPathPage]'
+import { languagesSorted } from '../../meta/languageSorted'
 
 type PropsPageModel = PropsPageBase & {
     next: { title: string; slug: string } | null
@@ -31,23 +32,29 @@ export const getStaticProps: GetStaticProps<
         slug: string
     }
 > = async (args) => {
+    const getSlug = (languageCode: string) => `/${['models', languageCode].join('/')}`
+
     if (args.params === undefined) {
         return { notFound: true }
     }
 
     const language = recordLanguages[args.params.slug]
 
+    const nextLanguage = languagesSorted.find(
+        (item, index) => index > 0 && languagesSorted[index - 1].code === language.code
+    )
+
     return {
         props: {
             id: language.code,
-            slug: `/${['models', language.code].join('/')}`,
+            slug: getSlug(language.code),
             isIndex: false,
             title: language.name,
             section: 'models',
             sectionTitle: recordSection.models.title,
             theme: recordSection.models.theme,
-            next: language.next
-                ? { title: language.next.name, slug: `/models/${language.next.code}` }
+            next: nextLanguage
+                ? { title: nextLanguage.name, slug: getSlug(nextLanguage.code) }
                 : null,
             meta: {
                 models: language.models || null,

website/src/templates/docs.js

@@ -14,8 +14,8 @@ import { getCurrentSource, github } from '../components/util'
 
 import siteMetadata from '../../meta/site.json'
 import sidebars from '../../meta/sidebars.json'
-import models from '../../meta/languages.json'
 import { nightly, legacy } from '../../meta/dynamicMeta.mjs'
+import { languagesSorted } from '../../meta/languageSorted'
 
 const Docs = ({ pageContext, children }) => {
     const {
@@ -34,7 +34,6 @@ const Docs = ({ pageContext, children }) => {
         apiDetails,
     } = pageContext
     const { modelsRepo } = siteMetadata
-    const { languages } = models
     const isModels = section === 'models'
     const sidebar = pageContext.sidebar
         ? { items: pageContext.sidebar }
@@ -42,10 +41,7 @@ const Docs = ({ pageContext, children }) => {
     let pageMenu = menu ? menu.map(([text, id]) => ({ text, id })) : []
 
     if (isModels) {
-        sidebar.items[1].items = languages
-            .filter(({ models }) => models && models.length)
-            .sort((a, b) => a.name.localeCompare(b.name))
-            .map((lang) => ({
+        sidebar.items[1].items = languagesSorted.map((lang) => ({
             text: lang.name,
             url: `/models/${lang.code}`,
             isActive: id === lang.code,