root level index pages need special dataRoute logic

Author: lindsaylevine

lib/pages/getServerSideProps/redirects.js

@@ -30,7 +30,10 @@ pages.forEach(({ route, filePath }) => {
         target,
       });
       redirects.push({
-        route: getDataRouteForRoute(route, locale),
+        route:
+          route === "/"
+            ? getDataRouteForRoute(`/${locale}`)
+            : getDataRouteForRoute(route, locale),
         target,
       });
     });

lib/pages/getStaticProps/setup.js

@@ -40,13 +40,21 @@ const setup = ({ functionsPath, publishPath }) => {
         const htmlPath = getFilePathForRoute(route_, "html", locale);
         setupStaticFileForPage({ inputPath: htmlPath, publishPath });
 
-        const jsonPath = getFilePathForRoute(route_, "json", locale);
         // The provided dataRoutes (from prerender-manifest) for these page types
         // actually don't include the locale (unclear why Vercel did this)
         // BUT the actual path to the .json files DO include the locale
         // therefore we need to set up the .json pages in the locale loop and
         // ignore the dataRoute provided by the prerender-manifest
-        const i18nDataRoute = getDataRouteForRoute(route, locale);
+        // Also root-level pages are generated into dist at path -> /en/index.json
+        // but fetched on the client as /_next/data/{BUILD_ID}/en.json haha love that for me
+        const jsonPath =
+          route === "/"
+            ? getFilePathForRoute(`/${locale}`, "json")
+            : getFilePathForRoute(route_, "json", locale);
+        const i18nDataRoute =
+          route === "/"
+            ? getDataRouteForRoute(`/${locale}`)
+            : getDataRouteForRoute(route, locale);
         setupStaticFileForPage({
           inputPath: jsonPath,
           outputPath: i18nDataRoute,

lib/pages/getStaticPropsWithRevalidate/redirects.js

@@ -52,7 +52,10 @@ pages.forEach(({ route, srcRoute, dataRoute }) => {
         });
         // Add a redirect for each dataRoute per locale
         redirects.push({
-          route: getDataRouteForRoute(route, locale),
+          route:
+            route === "/"
+              ? getDataRouteForRoute(`/${locale}`)
+              : getDataRouteForRoute(route, locale),
           target,
         });
       });