rough pass at i18n ssg breaking changes in next 10

Author: lindsaylevine

lib/helpers/getDataRouteForI18nRoute.js

@@ -0,0 +1,19 @@
+const { join } = require("path");
+const { readFileSync } = require("fs-extra");
+const { NEXT_DIST_DIR } = require("../config");
+const getFilePathForRoute = require("./getFilePathForRoute");
+
+// TO-DO: make more DRY with other getDataRoute helper
+
+// Get build ID that is used for data routes, e.g. /_next/data/BUILD_ID/...
+const fileContents = readFileSync(join(NEXT_DIST_DIR, "BUILD_ID"));
+const buildId = fileContents.toString();
+
+// Return the data route for the given route
+const getDataRouteForI18nRoute = (route, locale) => {
+  const filePath = getFilePathForRoute(route, "json");
+
+  return join("/_next", "data", buildId, locale, filePath);
+};
+
+module.exports = getDataRouteForI18nRoute;

lib/helpers/getFilePathForRouteWithI18n.js

@@ -0,0 +1,8 @@
+// Next apps with i18n have statically generated html for/under each locale
+const getFilePathForRoute = require("./getFilePathForRoute");
+
+const getFilePathForRouteWithI18n = (route, extension, locale) => {
+  return `${locale}${getFilePathForRoute(route, extension)}`;
+};
+
+module.exports = getFilePathForRouteWithI18n;

lib/pages/getStaticProps/redirects.js

@@ -1,6 +1,8 @@
 const { join } = require("path");
 const getFilePathForRoute = require("../../helpers/getFilePathForRoute");
+const getFilePathForRouteWithI18n = require("../../helpers/getFilePathForRouteWithI18n");
 const getNetlifyFunctionName = require("../../helpers/getNetlifyFunctionName");
+const getNextConfig = require("../../helpers/getNextConfig");
 const pages = require("./pages");
 
 // Pages with getStaticProps (without fallback or revalidation) only need
@@ -15,22 +17,43 @@ pages.forEach(({ route, dataRoute, srcRoute }) => {
   const conditions = ["Cookie=__prerender_bypass,__next_preview_data"];
   const target = `/.netlify/functions/${functionName}`;
 
-  // Add one redirect for the page, but only when the NextJS
-  // preview mode cookies are present
-  redirects.push({
-    route,
-    target,
-    force: true,
-    conditions,
-  });
+  const nextConfig = getNextConfig();
+  if (nextConfig.i18n) {
+    const { locales } = nextConfig.i18n;
+    locales.forEach((locale) => {
+      const pageRoute = srcRoute ? route : `${locale}${route}`;
+      const dataRoute_ = srcRoute ? dataRoute : `${locale}${dataRoute}`;
+      redirects.push({
+        route: pageRoute,
+        target,
+        force: true,
+        conditions,
+      });
+      redirects.push({
+        route: dataRoute_,
+        target,
+        force: true,
+        conditions,
+      });
+    });
+  } else {
+    // Add one redirect for the page, but only when the NextJS
+    // preview mode cookies are present
+    redirects.push({
+      route,
+      target,
+      force: true,
+      conditions,
+    });
 
-  // Add one redirect for the data route, same conditions
-  redirects.push({
-    route: dataRoute,
-    target,
-    force: true,
-    conditions,
-  });
+    // Add one redirect for the data route, same conditions
+    redirects.push({
+      route: dataRoute,
+      target,
+      force: true,
+      conditions,
+    });
+  }
 });
 
 module.exports = redirects;

lib/pages/getStaticProps/setup.js

@@ -1,6 +1,9 @@
 const { join } = require("path");
 const { logTitle, logItem } = require("../../helpers/logger");
+const getDataRouteForI18nRoute = require("../../helpers/getDataRouteForI18nRoute");
 const getFilePathForRoute = require("../../helpers/getFilePathForRoute");
+const getFilePathForRouteWithI18n = require("../../helpers/getFilePathForRouteWithI18n");
+const getNextConfig = require("../../helpers/getNextConfig");
 const isRouteWithFallback = require("../../helpers/isRouteWithFallback");
 const setupStaticFileForPage = require("../../helpers/setupStaticFileForPage");
 const setupNetlifyFunctionForPage = require("../../helpers/setupNetlifyFunctionForPage");
@@ -20,17 +23,63 @@ const setup = ({ functionsPath, publishPath }) => {
   pages.forEach(({ route, dataRoute, srcRoute }) => {
     logItem(route);
 
-    // Copy pre-rendered HTML page
-    const htmlPath = getFilePathForRoute(route, "html");
-    setupStaticFileForPage({ inputPath: htmlPath, publishPath });
-
-    // Copy page's JSON data
-    const jsonPath = getFilePathForRoute(route, "json");
-    setupStaticFileForPage({
-      inputPath: jsonPath,
-      outputPath: dataRoute,
-      publishPath,
-    });
+    const nextConfig = getNextConfig();
+
+    // If an app is using Next 10+'s i18n feature, next will put statically
+    // generated files under a different path for each different locale
+    if (nextConfig.i18n) {
+      const { locales } = nextConfig.i18n;
+      if (!locales || locales.length === 0) return;
+
+      const isNotDynamic = !srcRoute;
+      // Dynamic routes don't need special helper, Next auto prepends with locale
+      // in prerender-manifest, but static routes are missing locale
+      if (isNotDynamic) {
+        locales.forEach((locale) => {
+          // Copy pre-rendered HTML page
+          const route_ = route === "/" ? "" : route;
+          const htmlPath = getFilePathForRouteWithI18n(route_, "html", locale);
+          setupStaticFileForPage({ inputPath: htmlPath, publishPath });
+
+          const jsonPath = getFilePathForRouteWithI18n(route_, "json", locale);
+
+          // the actual route to the json is under pages/{locale}
+          // but the dataRoutes are the same for all locales according to
+          // prerender-manifest..
+          const realJsonDataRoute = getDataRouteForI18nRoute(route, locale);
+          setupStaticFileForPage({
+            inputPath: jsonPath,
+            outputPath: realJsonDataRoute,
+            publishPath,
+          });
+        });
+      } else {
+        // Copy pre-rendered HTML page
+        const htmlPath = getFilePathForRoute(route, "html");
+        setupStaticFileForPage({ inputPath: htmlPath, publishPath });
+
+        // Copy page's JSON data
+        const jsonPath = getFilePathForRoute(route, "json");
+        setupStaticFileForPage({
+          inputPath: jsonPath,
+          outputPath: dataRoute,
+          publishPath,
+        });
+      }
+      // TO-DO combine these conditions
+    } else {
+      // Copy pre-rendered HTML page
+      const htmlPath = getFilePathForRoute(route, "html");
+      setupStaticFileForPage({ inputPath: htmlPath, publishPath });
+
+      // Copy page's JSON data
+      const jsonPath = getFilePathForRoute(route, "json");
+      setupStaticFileForPage({
+        inputPath: jsonPath,
+        outputPath: dataRoute,
+        publishPath,
+      });
+    }
 
     // // Set up the Netlify function (this is ONLY for preview mode)
     const relativePath = getFilePathForRoute(srcRoute || route, "js");