I18n context initial props (#21930)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/next/next-server/lib/router/router.ts

@@ -1378,6 +1378,9 @@ export default class Router implements BaseRouter {
                 pathname,
                 query,
                 asPath: as,
+                locale: this.locale,
+                locales: this.locales,
+                defaultLocale: this.defaultLocale,
               } as any
             )
       )

packages/next/next-server/server/render.tsx

@@ -594,6 +594,9 @@ export async function renderToHTML(
     pathname,
     query,
     asPath,
+    locale: renderOpts.locale,
+    locales: renderOpts.locales,
+    defaultLocale: renderOpts.defaultLocale,
     AppTree: (props: any) => {
       return (
         <AppContainer>

test/integration/build-output/test/index.test.js

@@ -99,7 +99,7 @@ describe('Build Output', () => {
       expect(indexSize.endsWith('B')).toBe(true)
 
       // should be no bigger than 64.8 kb
-      expect(parseFloat(indexFirstLoad)).toBeCloseTo(63.5, 1)
+      expect(parseFloat(indexFirstLoad)).toBeCloseTo(63.6, 1)
       expect(indexFirstLoad.endsWith('kB')).toBe(true)
 
       expect(parseFloat(err404Size)).toBeCloseTo(3.04, 1)

test/integration/i18n-support-custom-error/next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  i18n: {
+    locales: ['en', 'fr', 'de', 'it'],
+    defaultLocale: 'en',
+  },
+}

test/integration/i18n-support-custom-error/pages/[slug].js

@@ -0,0 +1,44 @@
+import { useRouter } from 'next/router'
+
+const SlugPage = (props) => {
+  const router = useRouter()
+
+  return router.isFallback ? null : (
+    <>
+      <div>{props.title}</div>
+      <div id="props">{JSON.stringify(props)}</div>
+    </>
+  )
+}
+
+export const getStaticProps = async ({ locale, params }) => {
+  if (params.slug === 'my-custom-gone-path') {
+    return {
+      notFound: true,
+    }
+  }
+  return {
+    props: {
+      locale,
+      params,
+      title: params.slug,
+    },
+  }
+}
+
+export const getStaticPaths = async ({ locales }) => {
+  const mySlugs = ['my-custom-path-1', 'my-custom-path-2']
+
+  return {
+    paths: locales.reduce(
+      (paths, locale) => [
+        ...paths,
+        ...mySlugs.map((slug) => ({ locale, params: { slug } })),
+      ],
+      []
+    ),
+    fallback: 'blocking',
+  }
+}
+
+export default SlugPage

test/integration/i18n-support-custom-error/pages/_error.js

@@ -0,0 +1,20 @@
+function CustomError(props) {
+  return (
+    <>
+      <div>My Custom {props.statusCode} page</div>
+      <div id="error-props">{JSON.stringify(props)}</div>
+    </>
+  )
+}
+
+CustomError.getInitialProps = ({ res, err, ...context }) => {
+  // 410 - GONE
+  if (res && context.asPath === '/my-custom-gone-path') {
+    res.statusCode = 410
+  }
+
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
+  return { statusCode, locale: context.locale }
+}
+
+export default CustomError

test/integration/i18n-support-custom-error/pages/index.js

@@ -0,0 +1,3 @@
+export default function IndexPage() {
+  return <p>Hi 👋</p>
+}

test/integration/i18n-support-custom-error/test/index.test.js

@@ -0,0 +1,131 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import webdriver from 'next-webdriver'
+import {
+  launchApp,
+  killApp,
+  findPort,
+  nextBuild,
+  nextStart,
+} from 'next-test-utils'
+
+jest.setTimeout(1000 * 60 * 2)
+
+const appDir = join(__dirname, '..')
+const locales = ['en', 'fr', 'de', 'it']
+let appPort
+let app
+
+const runTests = () => {
+  it('should localized [slug] routes render correctly', async () => {
+    for (const locale of locales) {
+      const browser = await webdriver(
+        appPort,
+        `${locale === 'en' ? '' : `/${locale}`}/my-custom-path-1`
+      )
+
+      expect(JSON.parse(await browser.elementByCss('#props').text())).toEqual({
+        locale,
+        params: {
+          slug: 'my-custom-path-1',
+        },
+        title: 'my-custom-path-1',
+      })
+    }
+  })
+
+  it('handle custom http status maintaining locale props in custom _error page', async () => {
+    for (const locale of locales) {
+      const browser = await webdriver(
+        appPort,
+        `${locale === 'en' ? '' : `/${locale}`}/my-custom-gone-path`
+      )
+
+      expect(
+        JSON.parse(await browser.elementByCss('#error-props').text())
+      ).toEqual(
+        expect.objectContaining({
+          locale,
+          statusCode: 410,
+        })
+      )
+    }
+  })
+
+  it('handle default http status maintaining locale props in custom _error page', async () => {
+    for (const locale of locales) {
+      const browser = await webdriver(
+        appPort,
+        `${locale === 'en' ? '' : `/${locale}`}/my-custom-gone-path/other-path`
+      )
+
+      expect(
+        JSON.parse(await browser.elementByCss('#error-props').text())
+      ).toEqual(
+        expect.objectContaining({
+          locale,
+          statusCode: 404,
+        })
+      )
+    }
+  })
+
+  it('should work also on client side routing', async () => {
+    for (const locale of locales) {
+      const browser = await webdriver(
+        appPort,
+        `${locale === 'en' ? '' : `/${locale}`}/my-custom-path-1`
+      )
+
+      expect(JSON.parse(await browser.elementByCss('#props').text())).toEqual(
+        expect.objectContaining({
+          locale,
+          params: { slug: 'my-custom-path-1' },
+          title: 'my-custom-path-1',
+        })
+      )
+
+      await browser.eval('window.next.router.push("/my-custom-path-2")')
+
+      expect(JSON.parse(await browser.elementByCss('#props').text())).toEqual(
+        expect.objectContaining({
+          locale,
+          params: { slug: 'my-custom-path-2' },
+          title: 'my-custom-path-2',
+        })
+      )
+
+      await browser.eval('window.next.router.push("/my-custom-gone-path")')
+
+      expect(
+        JSON.parse(await browser.elementByCss('#error-props').text())
+      ).toEqual(
+        expect.objectContaining({
+          locale,
+        })
+      )
+    }
+  })
+}
+
+describe('Custom routes i18n', () => {
+  describe('dev mode', () => {
+    beforeAll(async () => {
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort)
+    })
+    afterAll(() => killApp(app))
+    runTests(true)
+  })
+
+  describe('production mode', () => {
+    beforeAll(async () => {
+      await nextBuild(appDir)
+      appPort = await findPort()
+      app = await nextStart(appDir, appPort)
+    })
+    afterAll(() => killApp(app))
+    runTests()
+  })
+})