meta: refactor data generation to server-side only (#6137)

* meta: refactor data generation to server-side only

* chore: use import for this small data

* meta: refactor to an inteligent cache system

* chore: some code review

* chore: final code review changes

* meta: updated certain packages

.eslintignore

···
 .swc
 build
 
-# Public Files
-public/node-releases-data.json
-public/blog-posts-data.json
-
 # We don't want to lint/prettify the Coverage Results
 coverage
 junit.xml

.husky/pre-commit

···
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-# if the generated files got tracked to this commit we revert them
-git reset public/node-releases-data.json
-git reset public/blog-posts-data.json
-
 # lint and format staged files
 npx lint-staged

.prettierignore

···
 
 # Next.js Generated Files
 public/static/documents
-public/node-releases-data.json
-public/blog-posts-data.json
 
 # Jest
 coverage

app/[locale]/[[...path]]/page.tsx

···
 import { setClientContext } from '@/client-context';
 import { MDXRenderer } from '@/components/mdxRenderer';
 import { WithLayout } from '@/components/withLayout';
-import { DEFAULT_VIEWPORT, ENABLE_STATIC_EXPORT } from '@/next.constants.mjs';
+import { ENABLE_STATIC_EXPORT } from '@/next.constants.mjs';
+import { DEFAULT_VIEWPORT } from '@/next.dynamic.constants.mjs';
 import { dynamicRouter } from '@/next.dynamic.mjs';
 import { availableLocaleCodes, defaultLocale } from '@/next.locales.mjs';
 import { MatterProvider } from '@/providers/matterProvider';
···
 type DynamicParams = { params: DynamicStaticPaths };
 
 // This is the default Viewport Metadata
-// @see https://nextjs.org/docs/app/api-reference/functions/generate-viewport
-export const viewport = DEFAULT_VIEWPORT;
+// @see https://nextjs.org/docs/app/api-reference/functions/generate-viewport#generateviewport-function
+export const generateViewport = async () => ({ ...DEFAULT_VIEWPORT });
 
 // This generates each page's HTML Metadata
 // @see https://nextjs.org/docs/app/api-reference/functions/generate-metadata
···
   return notFound();
 };
 
-// Enforce that all these routes are compatible with SSR
+// In this case we want to catch-all possible pages even to this page. This ensures that we use our 404
+// and that all pages including existing ones are handled here and provide `next-intl` locale also
+// @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams
+export const dynamicParams = true;
+
+// Enforces that this route is used as static rendering
+// @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
 export const dynamic = 'error';
 
 export default getPage;

app/[locale]/feed/[feed]/route.ts

···
 import { NextResponse } from 'next/server';
 
-import { generateWebsiteFeeds } from '@/next.data.mjs';
-import { blogData } from '@/next.json.mjs';
+import provideWebsiteFeeds from '@/next-data/providers/websiteFeeds';
+import { siteConfig } from '@/next.json.mjs';
 import { defaultLocale } from '@/next.locales.mjs';
 
-// loads all the data from the blog-posts-data.json file
-const websiteFeeds = generateWebsiteFeeds(blogData);
+// We only support fetching these pages from the /en/ locale code
+const locale = defaultLocale.code;
 
-type StaticParams = { params: { feed: string } };
+type StaticParams = { params: { feed: string; locale: string } };
 
 // This is the Route Handler for the `GET` method which handles the request
-// for Blog Feeds within the Node.js Website
+// for the Node.js Website Blog Feeds (RSS)
 // @see https://nextjs.org/docs/app/building-your-application/routing/router-handlers
-export const GET = (_: Request, { params }: StaticParams) => {
-  if (params.feed.includes('.xml') && websiteFeeds.has(params.feed)) {
-    return new NextResponse(websiteFeeds.get(params.feed)?.rss2(), {
-      headers: { 'Content-Type': 'application/xml' },
-    });
-  }
+export const GET = async (_: Request, { params }: StaticParams) => {
+  // Generate the Feed for the given feed type (blog, releases, etc)
+  const websiteFeed = await provideWebsiteFeeds(params.feed);
 
-  return new NextResponse(null, { status: 404 });
+  return new NextResponse(websiteFeed, {
+    headers: { 'Content-Type': 'application/xml' },
+    status: websiteFeed ? 200 : 404,
+  });
 };
 
 // This function generates the static paths that come from the dynamic segments
-// `en/feeds/[feed]` and returns an array of all available static paths
-// this is useful for static exports, for example.
-// Note that differently from the App Router these don't get built at the build time
-// only if the export is already set for static export
-export const generateStaticParams = () =>
-  [...websiteFeeds.keys()].map(feed => ({ feed, locale: defaultLocale.code }));
+// `[locale]/feeds/[feed]` and returns an array of all available static paths
+// This is used for ISR static validation and generation
+export const generateStaticParams = async () =>
+  siteConfig.rssFeeds.map(feed => ({ feed: feed.file, locale }));
+
+// Forces that only the paths from `generateStaticParams` are allowed, giving 404 on the contrary
+// @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams
+export const dynamicParams = false;
 
-// Enforces that this route is used as static rendering
+// Enforces that this route is cached and static as much as possible
 // @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
 export const dynamic = 'error';

app/[locale]/next-data/blog-data/[category]/route.ts

···
+import provideBlogData from '@/next-data/providers/blogData';
+import { defaultLocale } from '@/next.locales.mjs';
+
+// We only support fetching these pages from the /en/ locale code
+const locale = defaultLocale.code;
+
+type StaticParams = { params: { category: string; locale: string } };
+
+// This is the Route Handler for the `GET` method which handles the request
+// for providing Blog Posts, Pagination for every supported Blog Category
+// this includes the `year-XXXX` categories for yearly archives (pagination)
+// @see https://nextjs.org/docs/app/building-your-application/routing/router-handlers
+export const GET = async (_: Request, { params }: StaticParams) => {
+  const { posts, pagination } = await provideBlogData(params.category);
+
+  return Response.json(
+    { posts, pagination },
+    { status: posts.length ? 200 : 404 }
+  );
+};
+
+// This function generates the static paths that come from the dynamic segments
+// `[locale]/next-data/blog-data/[category]` and returns an array of all available static paths
+// This is used for ISR static validation and generation
+export const generateStaticParams = async () => {
+  // This metadata is the original list of all available categories and all available years
+  // within the Node.js Website Blog Posts (2011, 2012...)
+  const { meta } = await provideBlogData();
+
+  return [
+    ...meta.categories.map(category => ({ category, locale })),
+    ...meta.pagination.map(year => ({ category: `year-${year}`, locale })),
+  ];
+};
+
+// Forces that only the paths from `generateStaticParams` are allowed, giving 404 on the contrary
+// @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams
+export const dynamicParams = false;
+
+// Enforces that this route is cached and static as much as possible
+// @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
+export const dynamic = 'error';

app/[locale]/next-data/release-data/route.ts

···
+import provideReleaseData from '@/next-data/providers/releaseData';
+import { defaultLocale } from '@/next.locales.mjs';
+
+// We only support fetching these pages from the /en/ locale code
+const locale = defaultLocale.code;
+
+// This is the Route Handler for the `GET` method which handles the request
+// for generating static data related to the Node.js Release Data
+// @see https://nextjs.org/docs/app/building-your-application/routing/router-handlers
+export const GET = async () => {
+  const releaseData = await provideReleaseData();
+
+  return Response.json(releaseData);
+};
+
+// This function generates the static paths that come from the dynamic segments
+// `[locale]/next-data/release-data/` and returns an array of all available static paths
+// This is used for ISR static validation and generation
+export const generateStaticParams = async () => [{ locale }];
+
+// Forces that only the paths from `generateStaticParams` are allowed, giving 404 on the contrary
+// @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams
+export const dynamicParams = false;
+
+// Enforces that this route is used as static rendering
+// @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
+export const dynamic = 'error';

app/sitemap.ts

···
   const paths: string[] = [];
 
   for (const locale of availableLocaleCodes) {
-    const routesForLanguage = await dynamicRouter.getRoutesByLanguage(locale);
-    paths.push(
-      ...routesForLanguage.map(route => `${baseUrlAndPath}/${locale}/${route}`)
-    );
+    const routes = await dynamicRouter.getRoutesByLanguage(locale);
+
+    paths.push(...routes.map(route => `${baseUrlAndPath}/${locale}/${route}`));
   }
 
   const currentDate = new Date().toISOString();

components/Docs/NodeApiVersionLinks.tsx

···
+import type { FC } from 'react';
+
+import getReleaseData from '@/next-data/releaseData';
 import { DOCS_URL } from '@/next.constants.mjs';
-import { releaseData } from '@/next.json.mjs';
+
+// This is a React Async Server Component
+// Note that Hooks cannot be used in a RSC async component
+// Async Components do not get re-rendered at all.
+const NodeApiVersionLinks: FC = async () => {
+  const releaseData = await getReleaseData();
 
-const NodeApiVersionLinks = () => {
   // Gets all major releases without the 0x release as those are divided on 0.12x and 0.10x
   const mappedReleases = releaseData.slice(0, -1).map(({ major }) => (
     <li key={major}>

components/Downloads/DownloadReleasesTable.tsx

···
-import { useTranslations } from 'next-intl';
+import { getTranslations } from 'next-intl/server';
 import type { FC } from 'react';
 
-import { releaseData } from '@/next.json.mjs';
+import getReleaseData from '@/next-data/releaseData';
 import { getNodeApiLink } from '@/util/getNodeApiLink';
 import { getNodejsChangelog } from '@/util/getNodeJsChangelog';
 
-const DownloadReleasesTable: FC = () => {
-  const t = useTranslations();
+// This is a React Async Server Component
+// Note that Hooks cannot be used in a RSC async component
+// Async Components do not get re-rendered at all.
+const DownloadReleasesTable: FC = async () => {
+  const releaseData = await getReleaseData();
+
+  const t = await getTranslations();
 
   return (
     <table id="tbVersions" className="download-table full-width">

components/Header.tsx

···
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import { useTheme } from 'next-themes';
+import type { FC, PropsWithChildren } from 'react';
 import { useState } from 'react';
 
-import ActiveLink from '@/components/Common/ActiveLink';
 import Link from '@/components/Link';
-import { useSiteNavigation } from '@/hooks';
 import { usePathname } from '@/navigation.mjs';
 import { BASE_PATH } from '@/next.constants.mjs';
 import { availableLocales } from '@/next.locales.mjs';
 
-const Header = () => {
-  const { navigationItems } = useSiteNavigation();
+const Header: FC<PropsWithChildren> = ({ children }) => {
   const [showLangPicker, setShowLangPicker] = useState(false);
   const { resolvedTheme, setTheme } = useTheme();
 
···
           />
         </Link>
 
-        <nav aria-label="primary">
-          <ul className="list-divider-pipe">
-            {navigationItems.map((item, key) => (
-              <li key={key}>
-                <ActiveLink href={item.link} allowSubPath>
-                  {item.text}
-                </ActiveLink>
-              </li>
-            ))}
-          </ul>
-        </nav>
+        {children}
 
         <div className="switchers">
           <button

components/Pagination.tsx

···
 
 import Link from '@/components/Link';
 
-type PaginationProps = { prev?: number; next?: number };
+type PaginationProps = { prev?: number | null; next?: number | null };
 
 const Pagination: FC<PaginationProps> = ({ next, prev }) => {
   const t = useTranslations();

components/TopNavigation.tsx

···
+import type { FC } from 'react';
+
+import ActiveLink from '@/components/Common/ActiveLink';
+import { useSiteNavigation } from '@/hooks/server';
+
+const TopNavigation: FC = () => {
+  const { navigationItems } = useSiteNavigation();
+
+  return (
+    <nav aria-label="primary">
+      <ul className="list-divider-pipe">
+        {navigationItems.map(({ link, text }) => (
+          <li key={link}>
+            <ActiveLink href={link} allowSubPath>
+              {text}
+            </ActiveLink>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};
+
+export default TopNavigation;

components/withNodeRelease.tsx

···
 import type { FC } from 'react';
 
-import { releaseData } from '@/next.json.mjs';
+import getReleaseData from '@/next-data/releaseData';
 import type { NodeRelease, NodeReleaseStatus } from '@/types';
 
 type WithNodeReleaseProps = {
···
   children: FC<{ release: NodeRelease }>;
 };
 
-export const WithNodeRelease: FC<WithNodeReleaseProps> = ({
+// This is a React Async Server Component
+// Note that Hooks cannot be used in a RSC async component
+// Async Components do not get re-rendered at all.
+export const WithNodeRelease: FC<WithNodeReleaseProps> = async ({
   status,
   children: Component,
 }) => {
+  const releaseData = await getReleaseData();
+
   const matchingRelease = releaseData.find(release =>
     [status].flat().includes(release.status)
   );

hooks/react-client/index.ts

···
 export { default as useMediaQuery } from './useMediaQuery';
 export { default as useNotification } from './useNotification';
 export { default as useClientContext } from './useClientContext';
-export { default as useBlogData } from './useBlogData';
 export { default as useSiteNavigation } from './useSiteNavigation';

hooks/react-client/useBlogData.ts

···
-'use client';
-
-import useClientContext from '@/hooks/react-client/useClientContext';
-import { useBaseBlogData } from '@/hooks/useBaseBlogData';
-
-const useBlogData = () => {
-  const { pathname } = useClientContext();
-  const data = useBaseBlogData(pathname);
-
-  return data;
-};
-
-export default useBlogData;

hooks/react-client/useSiteNavigation.tsx

···
 'use client';
 
-import useBaseSiteNavigation from '@/hooks/useBaseSiteNavigation';
+const useSiteNavigation = () => {
+  throw new Error('Attempted to call useSiteNavigation from RCC');
+};
 
-export default useBaseSiteNavigation;
+export default useSiteNavigation;

hooks/react-server/index.ts

···
 export { default as useMediaQuery } from './useMediaQuery';
 export { default as useNotification } from './useNotification';
 export { default as useClientContext } from './useClientContext';
-export { default as useBlogData } from './useBlogData';
 export { default as useSiteNavigation } from './useSiteNavigation';

hooks/react-server/useBlogData.ts

···
-import useClientContext from '@/hooks/react-server/useClientContext';
-import { useBaseBlogData } from '@/hooks/useBaseBlogData';
-
-const useBlogData = () => {
-  const { pathname } = useClientContext();
-  const data = useBaseBlogData(pathname);
-
-  return data;
-};
-
-export default useBlogData;

hooks/react-server/useSiteNavigation.tsx

···
-import useBaseSiteNavigation from '@/hooks/useBaseSiteNavigation';
+import { useTranslations } from 'next-intl';
+import type { RichTranslationValues } from 'next-intl';
+
+import { siteNavigation } from '@/next.json.mjs';
+import type {
+  MappedNavigationEntry,
+  NavigationEntry,
+  NavigationKeys,
+} from '@/types';
+
+type Context = Record<string, RichTranslationValues>;
+type Navigation = Record<string, NavigationEntry>;
 
-export default useBaseSiteNavigation;
+// Provides Context replacement for variables within the Link. This is also something that is not going
+// to happen in the future with `nodejs/nodejs.dev` codebase
+const replaceLinkWithContext = (
+  link: string,
+  context?: RichTranslationValues
+) =>
+  Object.entries(context || {}).reduce(
+    (finalLink, [find, replace]) =>
+      finalLink.replace(
+        `{${find}}`,
+        typeof replace === 'string' ? replace : ''
+      ),
+    link
+  );
+
+const useSiteNavigation = () => {
+  const t = useTranslations();
+
+  const mapNavigationEntries = (
+    entries: Navigation,
+    context: Context = {},
+    level = 0,
+    includeItems = true
+  ): MappedNavigationEntry[] => {
+    const getFormattedMessage = (translationId: string, key: string) =>
+      t.rich(translationId, context[key] || {});
+
+    return Object.entries(entries).map(
+      ([key, { translationId, link, items }]) => {
+        const mappedEntry: MappedNavigationEntry = {
+          text: getFormattedMessage(translationId, key),
+          link: replaceLinkWithContext(link, context[key]),
+          items: [],
+          level,
+          key,
+        };
+
+        if (includeItems && items) {
+          mappedEntry.items = mapNavigationEntries(items, context, level + 1);
+        }
+
+        return mappedEntry;
+      }
+    );
+  };
+
+  const getSideNavigation = (section: NavigationKeys, context?: Context) => {
+    const { items, translationId, link } = siteNavigation[section];
+
+    return mapNavigationEntries(
+      { [section]: { translationId, link }, ...items },
+      context
+    );
+  };
+
+  return {
+    getSideNavigation,
+    navigationItems: mapNavigationEntries(siteNavigation, {}, 0, false),
+  };
+};
+
+export default useSiteNavigation;

hooks/useBaseBlogData.ts

···
-import { useMemo } from 'react';
-
-import { blogData } from '@/next.json.mjs';
-
-export const useBaseBlogData = (pathname: string) => {
-  const { posts, pagination, categories } = blogData;
-
-  const getPostsByCategory = (category: string) =>
-    posts.filter(post => post.category === category);
-
-  const getPostsByYear = (year: string) =>
-    posts.filter(post => new Date(post.date).getFullYear() === Number(year));
-
-  const getPagination = (currentYear: number | string) => {
-    const _currentYear = Number(currentYear);
-
-    return {
-      next: pagination.includes(_currentYear + 1)
-        ? _currentYear + 1
-        : undefined,
-      prev: pagination.includes(_currentYear - 1)
-        ? _currentYear - 1
-        : undefined,
-    };
-  };
-
-  const currentCategory = useMemo(() => {
-    // We split the pathname to retrieve the blog category from it since the
-    // URL is usually blog/{category} the second path piece is usually the
-    // category name
-    const [_pathname, category] = pathname.split('/');
-
-    if (_pathname === 'blog' && category && category.length) {
-      return category;
-    }
-
-    // if either the pathname does not match to a blog page
-    // which should not happen (as this hook should only be used in blog pages)
-    // or if there is no category in the URL we return the current year as category name
-    // which is always the default category (for example, the blog index)
-    return `year-${new Date().getFullYear()}`;
-  }, [pathname]);
-
-  return {
-    posts,
-    categories,
-    currentCategory,
-    getPostsByCategory,
-    getPostsByYear,
-    getPagination,
-  };
-};

hooks/useBaseSiteNavigation.tsx

···
-import { useTranslations } from 'next-intl';
-import type { RichTranslationValues } from 'next-intl';
-import { useMemo } from 'react';
-
-import { siteNavigation } from '@/next.json.mjs';
-import type { NavigationEntry, NavigationKeys } from '@/types';
-
-// These are mapped navigation entries. Navigation Entries can have sub-entries
-type MappedItems = {
-  text: ReturnType<ReturnType<typeof useTranslations>['rich']>;
-  link: string;
-  key: string;
-  level: number;
-  items: MappedItems[];
-};
-
-// Provides Context replacement for variables within the Link. This is also something that is not going
-// to happen in the future with `nodejs/nodejs.dev` codebase
-const replaceLinkWithContext = (link: string, context: RichTranslationValues) =>
-  Object.entries(context).reduce(
-    (finalLink, [find, replace]) =>
-      finalLink.replace(
-        `{${find}}`,
-        typeof replace === 'string' ? replace : ''
-      ),
-    link
-  );
-
-const useBaseSiteNavigation = () => {
-  const t = useTranslations();
-
-  const mapNavigationEntries = (
-    entries: Record<string, NavigationEntry>,
-    context?: Record<string, RichTranslationValues>,
-    level = 0
-  ): MappedItems[] => {
-    const getContext = (key: string) => (context && context[key]) || {};
-
-    const getFormattedMessage = (translationId: string, key: string) =>
-      t.rich(translationId, getContext(key));
-
-    return Object.entries(entries).map(([key, item]) => ({
-      text: getFormattedMessage(item.translationId, key),
-      link: replaceLinkWithContext(item.link, getContext(key)),
-      items: item.items
-        ? mapNavigationEntries(item.items, context, level + 1)
-        : [],
-      level,
-      key: key,
-    }));
-  };
-
-  const rootNavigationItems = useMemo(
-    () =>
-      Object.entries(siteNavigation).reduce(
-        (acc, [key, { translationId, link }]) => ({
-          ...acc,
-          [key]: { translationId, link },
-        }),
-        {}
-      ),
-    []
-  );
-
-  return {
-    navigationItems: mapNavigationEntries(rootNavigationItems),
-    getSideNavigation: (
-      section: NavigationKeys,
-      context?: Record<string, RichTranslationValues>
-    ) => {
-      const { items, translationId, link } = siteNavigation[section];
-
-      return mapNavigationEntries(
-        { [section]: { translationId, link }, ...items },
-        context
-      );
-    },
-  };
-};
-
-export default useBaseSiteNavigation;

layouts/BaseLayout.tsx

···
 
 import Footer from '@/components/Footer';
 import Header from '@/components/Header';
+import TopNavigation from '@/components/TopNavigation';
 
 const BaseLayout: FC<PropsWithChildren> = ({ children }) => (
   <>
-    <Header />
+    <Header>
+      <TopNavigation />
+    </Header>
     <main id="main">{children}</main>
     <Footer />
   </>

layouts/BlogCategoryLayout.tsx

···
-import { useTranslations } from 'next-intl';
-import { useMemo } from 'react';
+import { getTranslations } from 'next-intl/server';
 import type { FC } from 'react';
 
+import { getClientContext } from '@/client-context';
 import { Time } from '@/components/Common/Time';
 import Link from '@/components/Link';
 import Pagination from '@/components/Pagination';
-import { useClientContext, useBlogData } from '@/hooks/server';
-import type { BlogPost } from '@/types';
+import getBlogData from '@/next-data/blogData';
 
-const BlogCategoryLayout: FC = () => {
-  const t = useTranslations();
-  const { getPagination, getPostsByYear, getPostsByCategory, currentCategory } =
-    useBlogData();
+const getCurrentCategory = (pathname: string) => {
+  // We split the pathname to retrieve the blog category from it since the
+  // URL is usually blog/{category} the second path piece is usually the
+  // category name
+  const [_pathname, category] = pathname.split('/');
 
-  const { frontmatter } = useClientContext();
+  if (_pathname === 'blog' && category && category.length) {
+    return category;
+  }
 
-  const { posts, pagination, title } = useMemo(() => {
-    if (currentCategory.startsWith('year-')) {
-      const categoryWithoutPrefix = currentCategory.replace('year-', '');
+  // if either the pathname does not match to a blog page
+  // which should not happen (as this hook should only be used in blog pages)
+  // or if there is no category in the URL we return the current year as category name
+  // which is always the default category (for example, the blog index)
+  return `year-${new Date().getFullYear()}`;
+};
 
-      return {
-        posts: getPostsByYear(categoryWithoutPrefix),
-        pagination: getPagination(categoryWithoutPrefix),
-        title: t('layouts.blogIndex.currentYear', {
-          year: categoryWithoutPrefix,
-        }),
-      };
-    }
+// This is a React Async Server Component
+// Note that Hooks cannot be used in a RSC async component
+// Async Components do not get re-rendered at all.
+const BlogCategoryLayout: FC = async () => {
+  const { frontmatter, pathname } = getClientContext();
+  const category = getCurrentCategory(pathname);
 
-    return {
-      posts: getPostsByCategory(currentCategory),
-      pagination: undefined,
-      title: frontmatter.title,
-    };
-  }, [
-    currentCategory,
-    frontmatter.title,
-    getPagination,
-    getPostsByCategory,
-    getPostsByYear,
-    t,
-  ]);
+  const t = await getTranslations();
+
+  const { posts, pagination } = await getBlogData(category);
+
+  // this only applies if current category is a year category
+  const year = category.replace('year-', '');
+
+  const title = category.startsWith('year-')
+    ? t('layouts.blogIndex.currentYear', { year })
+    : frontmatter.title;
 
   return (
     <div className="container" dir="auto">
       <h2>{title}</h2>
 
       <ul className="blog-index">
-        {posts.map((post: BlogPost) => (
-          <li key={post.slug}>
-            <Time
-              date={post.date}
-              format={{ month: 'short', day: '2-digit' }}
-            />
-
-            <Link href={post.slug}>{post.title}</Link>
+        {posts.map(({ slug, date, title }) => (
+          <li key={slug}>
+            <Time date={date} format={{ month: 'short', day: '2-digit' }} />
+            <Link href={slug}>{title}</Link>
           </li>
         ))}
       </ul>

layouts/DocsLayout.tsx

···
 import type { FC, PropsWithChildren } from 'react';
 
 import SideNavigation from '@/components/SideNavigation';
-import { releaseData } from '@/next.json.mjs';
+import getReleaseData from '@/next-data/releaseData';
+
+// This is a React Async Server Component
+// Note that Hooks cannot be used in a RSC async component
+// Async Components do not get re-rendered at all.
+const DocsLayout: FC<PropsWithChildren> = async ({ children }) => {
+  const releaseData = await getReleaseData();
 
-const DocsLayout: FC<PropsWithChildren> = ({ children }) => {
   const [lts, current] = [
     releaseData.find(({ isLts }) => isLts),
     releaseData.find(({ status }) => status === 'Current'),

next-data/blogData.ts

···
+import { ENABLE_STATIC_EXPORT, NEXT_DATA_URL } from '@/next.constants.mjs';
+import type { BlogDataRSC } from '@/types';
+
+const getBlogData = (category: string): Promise<BlogDataRSC> => {
+  // When we're using Static Exports the Next.js Server is not running (during build-time)
+  // hence the self-ingestion APIs will not be available. In this case we want to load
+  // the data directly within the current thread, which will anyways be loaded only once
+  // We use lazy-imports to prevent `provideBlogData` from executing on import
+  if (ENABLE_STATIC_EXPORT) {
+    return import('@/next-data/providers/blogData').then(
+      ({ default: provideBlogData }) => provideBlogData(category)
+    );
+  }
+
+  // When we're on RSC with Server capabilities we prefer using Next.js Data Fetching
+  // as this will load cached data from the server instead of generating data on the fly
+  // this is extremely useful for ISR and SSG as it will not generate this data on every request
+  return fetch(`${NEXT_DATA_URL}blog-data/${category}`).then(r => r.json());
+};
+
+export default getBlogData;

next-data/generateBlogPostsData.mjs next-data/generators/blogData.mjs

···
 'use strict';
 
 import { createReadStream } from 'node:fs';
-import { writeFile } from 'node:fs/promises';
 import { basename, extname, join } from 'node:path';
 import readline from 'node:readline';
 
 import graymatter from 'gray-matter';
 
-import * as nextHelpers from '../next.helpers.mjs';
+import * as nextHelpers from '../../next.helpers.mjs';
 
 // gets the current blog path based on local module path
 const blogPath = join(process.cwd(), 'pages/en/blog');
-
-// this is the destination path for where the JSON file will be written
-const jsonFilePath = join(process.cwd(), 'public/blog-posts-data.json');
 
 /**
  * This contains the metadata of all available blog categories and
···
 };
 
 /**
- * This method is used to generate the JSON file
+ * This method is used to generate the Node.js Website Blog Data
+ * for self-consumption during RSC and Static Builds
+ *
+ * @return {Promise<import('../../types').BlogData>}
  */
-const generateBlogPostsData = async () => {
+const generateBlogData = async () => {
   // we retrieve all the filenames of all blog posts
   const filenames = await nextHelpers.getMarkdownFiles(
     process.cwd(),
···
     ['**/index.md', '**/pagination.md']
   );
 
-  // Writes the Blog Posts to the JSON file
-  const writeResult = blogPosts => {
-    return writeFile(
-      jsonFilePath,
-      JSON.stringify({
-        pagination: [...blogMetadata.pagination].sort(),
-        categories: [...blogMetadata.categories].sort(),
-        posts: blogPosts.sort((a, b) => b.date - a.date),
-      })
-    );
-  };
-
   return new Promise(resolve => {
     const blogPosts = [];
 
···
 
         // Once we finish reading all fles
         if (blogPosts.length === filenames.length) {
-          resolve(writeResult(blogPosts));
+          resolve({
+            pagination: [...blogMetadata.pagination].sort(),
+            categories: [...blogMetadata.categories].sort(),
+            posts: blogPosts.sort((a, b) => b.date - a.date),
+          });
         }
       });
     }
   });
 };
 
-export default generateBlogPostsData;
+export default generateBlogData;

next-data/generateNodeReleasesJson.mjs next-data/generators/releaseData.mjs

···
-import { writeFile } from 'node:fs/promises';
-import { join } from 'node:path';
-
 import nodevu from '@nodevu/core';
-
-// this is the destination path for where the JSON file will be written
-const jsonFilePath = join(process.cwd(), 'public/node-releases-data.json');
 
 // Gets the appropriate release status for each major release
 const getNodeReleaseStatus = (now, support) => {
···
   return 'Pending';
 };
 
-const generateNodeReleasesJson = async () => {
+/**
+ * This method is used to generate the Node.js Release Data
+ * for self-consumption during RSC and Static Builds
+ *
+ * @returns {Promise<import('../../types').NodeRelease[]>}
+ */
+const generateReleaseData = async () => {
   const nodevuOutput = await nodevu({ fetch: fetch });
 
   // Filter out those without documented support
···
     };
   });
 
-  return writeFile(
-    jsonFilePath,
-    JSON.stringify(
-      // nodevu returns duplicated v0.x versions (v0.12, v0.10, ...).
-      // This behavior seems intentional as the case is hardcoded in nodevu,
-      // see https://github.com/cutenode/nodevu/blob/0c8538c70195fb7181e0a4d1eeb6a28e8ed95698/core/index.js#L24.
-      // This line ignores those duplicated versions and takes the latest
-      // v0.x version (v0.12.18). It is also consistent with the legacy
-      // nodejs.org implementation.
-      nodeReleases.filter(
-        release => release.major !== 0 || release.version === '0.12.18'
-      )
+  return Promise.resolve(
+    // nodevu returns duplicated v0.x versions (v0.12, v0.10, ...).
+    // This behavior seems intentional as the case is hardcoded in nodevu,
+    // see https://github.com/cutenode/nodevu/blob/0c8538c70195fb7181e0a4d1eeb6a28e8ed95698/core/index.js#L24.
+    // This line ignores those duplicated versions and takes the latest
+    // v0.x version (v0.12.18). It is also consistent with the legacy
+    // nodejs.org implementation.
+    nodeReleases.filter(
+      release => release.major !== 0 || release.version === '0.12.18'
     )
   );
 };
 
-export default generateNodeReleasesJson;
+export default generateReleaseData;

next-data/generateWebsiteFeeds.mjs next-data/generators/websiteFeeds.mjs

···
 
 import { Feed } from 'feed';
 
-import { BASE_URL, BASE_PATH } from '../next.constants.mjs';
-import { siteConfig } from '../next.json.mjs';
+import { BASE_URL, BASE_PATH } from '../../next.constants.mjs';
+import { siteConfig } from '../../next.json.mjs';
 
 /**
  * This method generates RSS website feeds based on the current website configuration
  * and the current blog data that is available
  *
- * @param {import('../types').BlogData} blogData
+ * @param {Promise<import('../../types').BlogDataRSC>} blogData
  */
-const generateWebsiteFeeds = ({ posts }) => {
+const generateWebsiteFeeds = async blogData => {
   const canonicalUrl = `${BASE_URL}${BASE_PATH}/en`;
+
+  // Wait for the Blog Data for being generate
+  const { posts } = await blogData;
 
   /**
    * This generates all the Website RSS Feeds that are used for the website
···
         title: title,
         language: 'en',
         link: `${canonicalUrl}/feed/${file}`,
-        description: description || siteConfig.description,
+        description: description || description,
       });
 
       const blogFeedEntries = posts

next-data/providers/blogData.ts

···
+import { cache } from 'react';
+
+import generateBlogData from '@/next-data/generators/blogData.mjs';
+import type { BlogDataRSC } from '@/types';
+
+const blogData = generateBlogData();
+
+const provideBlogData = cache(
+  async (category?: string): Promise<BlogDataRSC> => {
+    return blogData.then(({ posts, categories, pagination }) => {
+      const meta = { categories, pagination };
+
+      if (category && categories.includes(category)) {
+        return {
+          posts: posts.filter(post => post.category === category),
+          pagination: { next: null, prev: null },
+          meta,
+        };
+      }
+
+      if (category && category.startsWith('year-')) {
+        const paramYear = Number(category.replace('year-', ''));
+
+        const isEqualYear = (date: string) =>
+          new Date(date).getFullYear() === paramYear;
+
+        return {
+          posts: posts.filter(({ date }) => isEqualYear(date)),
+          pagination: {
+            next: pagination.includes(paramYear + 1) ? paramYear + 1 : null,
+            prev: pagination.includes(paramYear - 1) ? paramYear - 1 : null,
+          },
+          meta,
+        };
+      }
+
+      if (category && !categories.includes(category)) {
+        return { posts: [], pagination: { next: null, prev: null }, meta };
+      }
+
+      return { posts, pagination: { next: null, prev: null }, meta };
+    });
+  }
+);
+
+export default provideBlogData;

next-data/providers/releaseData.ts

···
+import { cache } from 'react';
+
+import generateReleaseData from '@/next-data/generators/releaseData.mjs';
+
+const releaseData = generateReleaseData();
+
+const provideReleaseData = cache(async () => releaseData);
+
+export default provideReleaseData;

next-data/providers/websiteFeeds.ts

···
+import { cache } from 'react';
+
+import generateWebsiteFeeds from '@/next-data/generators/websiteFeeds.mjs';
+import provideBlogData from '@/next-data/providers/blogData';
+
+const websiteFeeds = generateWebsiteFeeds(provideBlogData());
+
+const provideWebsiteFeeds = cache(async (feed: string) => {
+  return websiteFeeds.then(feeds => {
+    if (feed.includes('.xml') && feeds.has(feed)) {
+      return feeds.get(feed)?.rss2();
+    }
+
+    return undefined;
+  });
+});
+
+export default provideWebsiteFeeds;

next-data/releaseData.ts

···
+import { ENABLE_STATIC_EXPORT, NEXT_DATA_URL } from '@/next.constants.mjs';
+import type { NodeRelease } from '@/types';
+
+const getReleaseData = (): Promise<NodeRelease[]> => {
+  // When we're using Static Exports the Next.js Server is not running (during build-time)
+  // hence the self-ingestion APIs will not be available. In this case we want to load
+  // the data directly within the current thread, which will anyways be loaded only once
+  // We use lazy-imports to prevent `provideBlogData` from executing on import
+  if (ENABLE_STATIC_EXPORT) {
+    return import('@/next-data/providers/releaseData').then(
+      ({ default: provideReleaseData }) => provideReleaseData()
+    );
+  }
+
+  // When we're on RSC with Server capabilities we prefer using Next.js Data Fetching
+  // as this will load cached data from the server instead of generating data on the fly
+  // this is extremely useful for ISR and SSG as it will not generate this data on every request
+  return fetch(`${NEXT_DATA_URL}release-data`).then(r => r.json());
+};
+
+export default getReleaseData;

next.constants.mjs

···
 'use strict';
 
-import { blogData, siteConfig } from './next.json.mjs';
-import { defaultLocale } from './next.locales.mjs';
+/**
+ * This is used for the current Legacy Website Blog Pagination Generation
+ *
+ * @deperecated remove with website redesign
+ */
+export const CURRENT_YEAR = new Date().getFullYear();
+
+/**
+ * This is used to verify if the current Website is running on a Development Environment
+ */
+export const IS_DEVELOPMENT = process.env.NODE_ENV === 'development';
 
 /**
  * This is used for telling Next.js if the Website is deployed on Vercel
···
 export const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || '';
 
 /**
+ * This is used for fetching static next-data through the /en/next-data/ endpoint
+ *
+ * Note this is assumes that the Node.js Website is either running within Vercel Environment
+ * or running locally (either production or development) mode
+ *
+ * Note this variable can be overrided via a manual Environment Variable defined by us if necessary.
+ */
+export const NEXT_DATA_URL = process.env.NEXT_PUBLIC_DATA_URL
+  ? process.env.NEXT_PUBLIC_DATA_URL
+  : VERCEL_ENV
+  ? `${BASE_URL}${BASE_PATH}/en/next-data/`
+  : `http://localhost:3000/en/next-data/`;
+
+/**
  * This ReGeX is used to remove the `index.md(x)` suffix of a name and to remove
  * the `.md(x)` extensions of a filename.
  *
···
  */
 export const MD_EXTENSION_REGEX = /((\/)?(index))?\.mdx?$/i;
 
-/**
- * This is a list of all static routes or pages from the Website that we do not
- * want to allow to be statically built on our Static Export Build.
- *
- * @type {((route: import('./types').RouteSegment) => boolean)[]} A list of Ignored Routes by Regular Expressions
- */
-export const STATIC_ROUTES_IGNORES = [
-  // Ignore the 404 route on Static Generation
-  ({ pathname }) => pathname === '404',
-  // This is used to ignore is used to ignore all blog routes except for the English language
-  ({ locale, pathname }) =>
-    locale !== defaultLocale.code && /^blog\//.test(pathname),
-  // This is used to ignore the blog/pagination meta route
-  ({ pathname }) => /^blog\/pagination/.test(pathname),
-];
-
-/**
- * This is a list of all dynamic routes or pages from the Website that we do not
- * want to allow to be dynamically access by our Dynamic Route Engine
- *
- * @type {RegExp[]} A list of Ignored Routes by Regular Expressions
- */
-export const DYNAMIC_ROUTES_IGNORES = [
-  // This is used to ignore the blog/pagination route
-  /^blog\/pagination/,
-];
-
-/**
- * This is a list of all static routes that we want to rewrite their pathnames
- * into something else. This is useful when you want to have the current pathname in the route
- * but replace the actual Markdown file that is being loaded by the Dynamic Route to something else
- *
- * @type {[RegexExp, (pathname: string) => string][]}
- */
-export const DYNAMIC_ROUTES_REWRITES = [
-  [/^blog\/year-/, () => 'blog/pagination'],
-];
-
-/**
- * This is a constant that should be used during runtime by (`getStaticPaths`) on `pages/[...path].tsx`
- *
- * This function is used to provide an extra set of routes that are not provided by `next.dynamic.mjs`
- * static route discovery. This can happen when we have dynamic routes that **must** be provided
- * within the static export (static build) of the website. This constant usually would be used along
- * with a matching pathname on `DYNAMIC_ROUTES_REWRITES`.
- *
- * @type {string[]} A list of all the Dynamic Routes that are generated by the Website
- */
-export const DYNAMIC_GENERATED_ROUTES = [
-  ...blogData.pagination.map(year => `blog/year-${year}`),
-];
-
 /***
  * This is a list of all external links that are used on website sitemap.
  * @see https://github.com/nodejs/nodejs.org/issues/5813 for more context
···
 export const THEME_STORAGE_KEY = 'theme';
 
 /**
- * This is the default Next.js Page Metadata for all pages
- *
- * @type {import('next').Metadata}
- */
-export const DEFAULT_METADATA = {
-  metadataBase: new URL(`${BASE_URL}${BASE_PATH}`),
-  title: siteConfig.title,
-  description: siteConfig.description,
-  robots: { index: true, follow: true },
-  twitter: {
-    card: siteConfig.twitter.card,
-    title: siteConfig.twitter.title,
-    creator: siteConfig.twitter.username,
-    images: {
-      url: siteConfig.twitter.img,
-      alt: siteConfig.twitter.imgAlt,
-    },
-  },
-  alternates: {
-    canonical: '',
-    languages: { 'x-default': '' },
-    types: {
-      'application/rss+xml': 'https://nodejs.org/en/feed/blog.xml',
-    },
-  },
-  icons: { icon: siteConfig.favicon },
-  openGraph: { images: siteConfig.twitter.img },
-};
-
-/**
- * This is the default Next.js Viewport Metadata for all pages
- *
- * @type {import('next').Viewport}
- */
-export const DEFAULT_VIEWPORT = {
-  themeColor: siteConfig.accentColor,
-  width: 'device-width',
-  initialScale: 1,
-};
-
-/**
  * This is the Sentry DSN for the Node.js Website Project
  */
 export const SENTRY_DSN =
···
 /**
  * This states if Sentry should be enabled and bundled within our App
  */
-export const SENTRY_ENABLE =
-  process.env.NODE_ENV === 'development' || !!VERCEL_ENV;
+export const SENTRY_ENABLE = IS_DEVELOPMENT || !!VERCEL_ENV;
 
 /**
  * This configures the sampling rate for Sentry

next.data.mjs

···
-'use strict';
-
-import generateBlogPostsData from './next-data/generateBlogPostsData.mjs';
-import generateNodeReleasesJson from './next-data/generateNodeReleasesJson.mjs';
-import generateWebsiteFeeds from './next-data/generateWebsiteFeeds.mjs';
-
-export {
-  generateWebsiteFeeds,
-  generateBlogPostsData,
-  generateNodeReleasesJson,
-};

next.dynamic.constants.mjs

···
+'use strict';
+
+import { BASE_PATH, BASE_URL, CURRENT_YEAR } from './next.constants.mjs';
+import { siteConfig } from './next.json.mjs';
+import { defaultLocale } from './next.locales.mjs';
+
+/**
+ * This is a list of all static routes or pages from the Website that we do not
+ * want to allow to be statically built on our Static Export Build.
+ *
+ * @type {((route: import('./types').RouteSegment) => boolean)[]} A list of Ignored Routes by Regular Expressions
+ */
+export const STATIC_ROUTES_IGNORES = [
+  // Ignore the 404 route on Static Generation
+  ({ pathname }) => pathname === '404',
+  // This is used to ignore is used to ignore all blog routes except for the English language
+  ({ locale, pathname }) =>
+    locale !== defaultLocale.code && /^blog\//.test(pathname),
+  // This is used to ignore the blog/pagination meta route
+  // @deprecated remove with website redesign
+  ({ pathname }) => /^blog\/pagination/.test(pathname),
+];
+
+/**
+ * This is a list of all dynamic routes or pages from the Website that we do not
+ * want to allow to be dynamically access by our Dynamic Route Engine
+ *
+ * @type {RegExp[]} A list of Ignored Routes by Regular Expressions
+ * @deprecated remove with website redesign
+ */
+export const DYNAMIC_ROUTES_IGNORES = [
+  // This is used to ignore the blog/pagination route
+  /^blog\/pagination/,
+];
+
+/**
+ * This is a list of all static routes that we want to rewrite their pathnames
+ * into something else. This is useful when you want to have the current pathname in the route
+ * but replace the actual Markdown file that is being loaded by the Dynamic Route to something else
+ *
+ * @type {[RegexExp, (pathname: string) => string][]}
+ * @deprecated remove with website redesign
+ */
+export const DYNAMIC_ROUTES_REWRITES = [
+  [/^blog\/year-/, () => 'blog/pagination'],
+];
+
+/**
+ * This is a constant that should be used during runtime by (`getStaticPaths`) on `pages/[...path].tsx`
+ *
+ * This function is used to provide an extra set of routes that are not provided by `next.dynamic.mjs`
+ * static route discovery. This can happen when we have dynamic routes that **must** be provided
+ * within the static export (static build) of the website. This constant usually would be used along
+ * with a matching pathname on `DYNAMIC_ROUTES_REWRITES`.
+ *
+ * @type {string[]} A list of all the Dynamic Routes that are generated by the Website
+ * @deprecated remove with website redesign
+ */
+export const DYNAMIC_GENERATED_ROUTES = [
+  ...Array.from(
+    // Statically generate a List of Years from Current Year
+    // til 2011 which is the oldest year with blog posts
+    { length: CURRENT_YEAR - 2011 },
+    (_, i) => CURRENT_YEAR - i
+  ).map(year => `blog/year-${year}`),
+];
+
+/**
+ * This is the default Next.js Page Metadata for all pages
+ *
+ * @type {import('next').Metadata}
+ */
+export const DEFAULT_METADATA = {
+  metadataBase: new URL(`${BASE_URL}${BASE_PATH}`),
+  title: siteConfig.title,
+  description: siteConfig.description,
+  robots: { index: true, follow: true },
+  twitter: {
+    card: siteConfig.twitter.card,
+    title: siteConfig.twitter.title,
+    creator: siteConfig.twitter.username,
+    images: {
+      url: siteConfig.twitter.img,
+      alt: siteConfig.twitter.imgAlt,
+    },
+  },
+  alternates: {
+    canonical: '',
+    languages: { 'x-default': '' },
+    types: {
+      'application/rss+xml': `${BASE_URL}${BASE_PATH}/en/feed/blog.xml`,
+    },
+  },
+  icons: { icon: siteConfig.favicon },
+  openGraph: { images: siteConfig.twitter.img },
+};
+
+/**
+ * This is the default Next.js Viewport Metadata for all pages
+ *
+ * @return {import('next').Viewport}
+ */
+export const DEFAULT_VIEWPORT = {
+  themeColor: siteConfig.accentColor,
+  width: 'device-width',
+  initialScale: 1,
+};

next.dynamic.mjs

···
 import { cache } from 'react';
 import { VFile } from 'vfile';
 
+import { MD_EXTENSION_REGEX, BASE_URL, BASE_PATH } from './next.constants.mjs';
 import {
-  DYNAMIC_GENERATED_ROUTES,
   DYNAMIC_ROUTES_IGNORES,
   DYNAMIC_ROUTES_REWRITES,
-  MD_EXTENSION_REGEX,
   STATIC_ROUTES_IGNORES,
+  DYNAMIC_GENERATED_ROUTES,
   DEFAULT_METADATA,
-  BASE_URL,
-  BASE_PATH,
-} from './next.constants.mjs';
+} from './next.dynamic.constants.mjs';
 import { getMarkdownFiles } from './next.helpers.mjs';
 import { siteConfig } from './next.json.mjs';
 import { availableLocaleCodes, defaultLocale } from './next.locales.mjs';

next.json.mjs

···
 'use strict';
 
-import _localeConfig from './i18n/config.json' assert { type: 'json' };
 import _siteNavigation from './navigation.json' assert { type: 'json' };
-import _blogData from './public/blog-posts-data.json' assert { type: 'json' };
-import _releaseData from './public/node-releases-data.json' assert { type: 'json' };
 import _siteRedirects from './redirects.json' assert { type: 'json' };
 import _siteConfig from './site.json' assert { type: 'json' };
-
-/** @type {import('./types').LocaleConfig[]} */
-export const localeConfig = _localeConfig;
 
 /** @type {Record<string, import('./types').NavigationEntry>} */
 export const siteNavigation = _siteNavigation;
-
-/** @type {import('./types').BlogData} */
-export const blogData = _blogData;
-
-/** @type {import('./types').NodeRelease[]} */
-export const releaseData = _releaseData;
 
 /** @type {Record<string, import('./types').Redirect[]>} */
 export const siteRedirects = _siteRedirects;

next.locales.mjs

···
 'use strict';
 
-import { localeConfig } from './next.json.mjs';
+import localeConfig from './i18n/config.json' assert { type: 'json' };
 
 // As set of available and enabled locales for the website
 // This is used for allowing us to redirect the user to any

next.rewrites.mjs

···
  * These are sourced originally from https://github.com/nodejs/build/blob/main/ansible/www-standalone/resources/config/nodejs.org?plain=1
  * and were then converted to Next.js rewrites. Note that only relevant rewrites were added, and some were modified to match Next.js's syntax
  *
- * @type {import('next').NextConfig['redirects']}
+ * @return {Promise<import('next').NextConfig['redirects']>}
  */
 const redirects = async () => {
   return siteRedirects.external.map(({ source, destination }) => ({
···
  * These are sourced originally from https://github.com/nodejs/build/blob/main/ansible/www-standalone/resources/config/nodejs.org?plain=1
  * and were then converted to Next.js rewrites. Note that only relevant rewrites were added, and some were modified to match Next.js's syntax
  *
- * @type {import('next').NextConfig['rewrites']}
+ * @return {Promise<import('next').NextConfig['rewrites']>}
  */
-const rewrites = async () => ({
-  afterFiles: siteRedirects.internal.map(({ source, destination }) => ({
-    source: source.replace('/:locale/', localesMatch),
-    destination,
-  })),
-});
+const rewrites = async () => {
+  return {
+    afterFiles: siteRedirects.internal.map(({ source, destination }) => ({
+      source: source.replace('/:locale/', localesMatch),
+      destination,
+    })),
+  };
+};
 
 export { rewrites, redirects };

package-lock.json

···
         "husky": "8.0.3",
         "lint-staged": "15.0.2",
         "next": "~14.0.3",
-        "next-intl": "^3.1.0",
+        "next-intl": "^3.1.3",
         "next-themes": "~0.2.1",
         "postcss": "~8.4.30",
         "postcss-calc": "~9.0.1",
···
         "remark-gfm": "~4.0.0",
         "semver": "~7.5.4",
         "sharp": "0.32.6",
-        "shikiji": "~0.6.13",
+        "shikiji": "~0.7.3",
         "tailwindcss": "^3.3.5",
         "turbo": "1.10.16",
         "typescript": "~5.2.2",
···
       }
     },
     "node_modules/next-intl": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/next-intl/-/next-intl-3.1.0.tgz",
-      "integrity": "sha512-ZbQeJO0RcORFljtNjQmbXRnyS4KwiI0DCMemdIl0OmwoI3PWSpJojE/0hmy6RRZJHEtrWQnpS+afCBpvqgii+A==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/next-intl/-/next-intl-3.1.3.tgz",
+      "integrity": "sha512-pjR6px7qj5i7gNgFMFlk6nX8Y0A2xeoYUYXEMrvg9dg3peRuZYGpcf6r46+paEd2JvvIZSb7WzlUH98nu5S5HQ==",
       "dependencies": {
         "@formatjs/intl-localematcher": "^0.2.32",
         "negotiator": "^0.6.3",
-        "use-intl": "^3.1.0"
+        "use-intl": "^3.1.3"
       },
       "peerDependencies": {
         "next": "^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
···
       }
     },
     "node_modules/shikiji": {
-      "version": "0.6.13",
-      "resolved": "https://registry.npmjs.org/shikiji/-/shikiji-0.6.13.tgz",
-      "integrity": "sha512-4T7X39csvhT0p7GDnq9vysWddf2b6BeioiN3Ymhnt3xcy9tXmDcnsEFVxX18Z4YcQgEE/w48dLJ4pPPUcG9KkA==",
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/shikiji/-/shikiji-0.7.3.tgz",
+      "integrity": "sha512-kMb6bfZ+VrTcVn35RGnYjCfRnnPvg08UUXnpVW5bqT5S8UyrrUtUJjhzQHkMi5k8N1aS/FO5YDl+sHRiRdtcLQ==",
       "dependencies": {
         "hast-util-to-html": "^9.0.0"
       }
···
       }
     },
     "node_modules/use-intl": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/use-intl/-/use-intl-3.1.0.tgz",
-      "integrity": "sha512-PT6g2BISl93vzkUlbEPG6WN6ztOe75F+d3flxCzn4MpHEDdiDwlc6WpNcoOnlIfxEQvYKr66zDA0QrJAEB8yAQ==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/use-intl/-/use-intl-3.1.3.tgz",
+      "integrity": "sha512-rYP1O+RiVef8/iMdZxYp4KIuPszzFQQMzp1y0pMm1VBRdrwWw9YA5j2bEIbjxRk6DaVGW+cpW9mdPe5X2snNvg==",
       "dependencies": {
         "@formatjs/ecma402-abstract": "^1.11.4",
         "intl-messageformat": "^9.3.18"

package.json

···
   },
   "scripts": {
     "scripts:release-post": "cross-env NODE_NO_WARNINGS=1 node scripts/release-post/index.mjs",
-    "scripts:generate-next-data": "cross-env NODE_NO_WARNINGS=1 node scripts/generate-next-data/index.mjs",
-    "preserve": "npm run scripts:generate-next-data",
     "serve": "cross-env NODE_NO_WARNINGS=1 next dev --turbo",
-    "prebuild": "npm run scripts:generate-next-data",
     "build": "cross-env NODE_NO_WARNINGS=1 next build",
     "start": "cross-env NODE_NO_WARNINGS=1 next start",
     "deploy": "cross-env NEXT_STATIC_EXPORT=true npm run build",
···
     "husky": "8.0.3",
     "lint-staged": "15.0.2",
     "next": "~14.0.3",
-    "next-intl": "^3.1.0",
+    "next-intl": "^3.1.3",
     "next-themes": "~0.2.1",
     "postcss": "~8.4.30",
     "postcss-calc": "~9.0.1",
···
     "remark-gfm": "~4.0.0",
     "semver": "~7.5.4",
     "sharp": "0.32.6",
-    "shikiji": "~0.6.13",
+    "shikiji": "~0.7.3",
     "tailwindcss": "^3.3.5",
     "turbo": "1.10.16",
     "typescript": "~5.2.2",

public/blog-posts-data.json

···
-{ "pagination": [], "categories": [], "posts": [] }

public/node-releases-data.json

···
-[]

scripts/generate-next-data/index.mjs

···
-'use strict';
-
-const textToDisplay =
-  '(blog-posts-data.json) and (node-releases-data.json) got generated.';
-
-console.log(`- \x1b[0;34minfo\x1b[0m \x1b[1m${textToDisplay}\x1b[0m`);
-
-import * as nextData from '../../next.data.mjs';
-
-// generate the node.js releases json file
-await nextData.generateNodeReleasesJson();
-
-// generate the data from blog posts
-await nextData.generateBlogPostsData();

types/blog.ts

···
   pagination: number[];
   categories: string[];
 }
+
+export interface BlogDataRSC {
+  posts: BlogPost[];
+  pagination: {
+    next: number | null;
+    prev: number | null;
+  };
+  meta: {
+    categories: string[];
+    pagination: number[];
+  };
+}

types/navigation.ts

···
+import type { useTranslations } from 'next-intl';
+
 export type NavigationKeys =
   | 'about'
   | 'download'
···
   link: string;
   items?: Record<string, NavigationEntry>;
 }
+
+export interface MappedNavigationEntry {
+  text: ReturnType<ReturnType<typeof useTranslations>['rich']>;
+  link: string;
+  key: string;
+  level: number;
+  items: MappedNavigationEntry[];
+}