rough pass at i18n ssg breaking changes in next 10

Author: lindsaylevine

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/helpers/getNextConfig.js

@@ -0,0 +1,12 @@
+// Get next.config.js
+const { PHASE_PRODUCTION_BUILD } = require("next/constants");
+const { default: loadConfig } = require("next/dist/next-server/server/config");
+const { resolve } = require("path");
+
+const getNextConfig = () => {
+  // Load next.config.js
+  // Use same code as https://github.com/vercel/next.js/blob/25488f4a03db30cade4d086ba49cd9a50a2ac02e/packages/next/build/index.ts#L114
+  return loadConfig(PHASE_PRODUCTION_BUILD, resolve("."));
+};
+
+module.exports = getNextConfig;

lib/helpers/getNextDistDir.js

@@ -1,12 +1,9 @@
 // Get the NextJS distDir specified in next.config.js
-const { PHASE_PRODUCTION_BUILD } = require("next/constants");
-const { default: loadConfig } = require("next/dist/next-server/server/config");
-const { resolve, join } = require("path");
+const { join } = require("path");
+const getNextConfig = require("./getNextConfig");
 
 const getNextDistDir = ({ nextConfigPath }) => {
-  // Load next.config.js
-  // Use same code as https://github.com/vercel/next.js/blob/25488f4a03db30cade4d086ba49cd9a50a2ac02e/packages/next/build/index.ts#L114
-  const nextConfig = loadConfig(PHASE_PRODUCTION_BUILD, resolve("."));
+  const nextConfig = getNextConfig();
 
   return join(".", nextConfig.distDir);
 };

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

@@ -2,6 +2,8 @@ const { join } = require("path");
 const { logTitle, logItem } = require("../../helpers/logger");
 const { NETLIFY_PUBLISH_PATH } = require("../../config");
 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");
@@ -21,13 +23,56 @@ const setup = () => {
   pages.forEach(({ route, dataRoute, srcRoute }) => {
     logItem(route);
 
-    // Copy pre-rendered HTML page
-    const htmlPath = getFilePathForRoute(route, "html");
-    setupStaticFileForPage(htmlPath);
+    const nextConfig = getNextConfig();
 
-    // Copy page's JSON data
-    const jsonPath = getFilePathForRoute(route, "json");
-    setupStaticFileForPage(jsonPath, dataRoute);
+    // 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;
+
+      // ok so you dont need to loop over for srcRoutes and do the
+      // set up twice
+      const isNotDynamic = !srcRoute;
+      // Dynamic routes dont need special helper, Next auto prepends with locale
+      // in prerender-manifest
+      if (isNotDynamic) {
+        locales.forEach((locale) => {
+          // Copy pre-rendered HTML page
+          const htmlPath = getFilePathForRouteWithI18n(route, "html", locale);
+          setupStaticFileForPage(htmlPath);
+        });
+        // Copy page's JSON data
+        // TO-DO: get more clarity on dataRoute logic/files;
+        // dataRoute is the same for both/all locales (as is route above)
+        // BUT in setupStaticFileForPage we use the second arg as the outputhPath
+        // (unlike the html pages above where we use the first arg/route as the outputPath)
+        // and its not clear why.. but assuming we only have/need this
+        // one json we dont need to do in the locale loop/for each locale
+        const jsonPath = getFilePathForRouteWithI18n(
+          route,
+          "json",
+          nextConfig.i18n.defaultLocale || locales[0]
+        );
+        setupStaticFileForPage(jsonPath, dataRoute);
+      } else {
+        // Copy pre-rendered HTML page
+        const htmlPath = getFilePathForRoute(route, "html");
+        setupStaticFileForPage(htmlPath);
+
+        // Copy page's JSON data
+        const jsonPath = getFilePathForRoute(route, "json");
+        setupStaticFileForPage(jsonPath, dataRoute);
+      }
+    } else {
+      // Copy pre-rendered HTML page
+      const htmlPath = getFilePathForRoute(route, "html");
+      setupStaticFileForPage(htmlPath);
+
+      // Copy page's JSON data
+      const jsonPath = getFilePathForRoute(route, "json");
+      setupStaticFileForPage(jsonPath, dataRoute);
+    }
 
     // // Set up the Netlify function (this is ONLY for preview mode)
     const relativePath = getFilePathForRoute(srcRoute || route, "js");