fix: preserve casing for dynamic route parameter names

next-multilingual · Oct 31, 2022 · 9f43bcd · 9f43bcd
1 parent 3add5f3
commit 9f43bcd
Show file tree

Hide file tree

Showing 7 changed files with 166 additions and 120 deletions.
diff --git a/TODO.md b/TODO.md
@@ -21,7 +21,7 @@ To make tracking of to-dos easier, this file can be used to track progress on th
 - Translation Export/import CLI
 - Profiling, package size optimization (e.g. intl-messageformat strip down)
 - Look to see if we can use middleware to redirect default (fake) locale: https://nextjs.org/docs/advanced-features/i18n-routing
-- bug: the Babel plugin does not check if an hijack target (import) is used before injecting. This cause the import to be removed for optimization and cause a 500 error when trying to inject the non-existing import.
+
 - Check if we can add `title` attributes on `Link` components (not supported by Next.js?) (ref: https://backlinko.com/google-ranking-factors)
 - Add automated test:
   - Test when a string file changes, the page is updated (developer experience?)
@@ -42,6 +42,7 @@ To make tracking of to-dos easier, this file can be used to track progress on th
 
 ### Done ✔️
 
+- bug: the Babel plugin does not check if an hijack target (import) is used before injecting. This cause the import to be removed for optimization and cause a 500 error when trying to inject the non-existing import.
 - Add support for catch-all dynamic routes
 - Improve overall locales values access with new APIs
 - Add proper support for localized dynamic route parameters

diff --git a/example/.eslintrc.yaml b/example/.eslintrc.yaml
@@ -81,6 +81,15 @@ overrides:
               - field
               - constructor
               - method
+  # Filenames: Next.js pages must be `kebabCase` other than dynamic routes
+  - files:
+      - 'pages/**/*'
+    rules:
+      'unicorn/filename-case':
+        - error
+        - case: kebabCase
+          ignore:
+            - ^(.*\/)?(\[.+\])\.(jsx|tsx)$
   # Filenames: components must be `PascalCase`
   - files:
       - 'src/components/**/*'

diff --git a/example/pages/tests/dynamic-routes/catch-all/category/[[...category]].tsx b/example/pages/tests/dynamic-routes/catch-all/category/[[...category]].tsx
@@ -79,6 +79,14 @@ export const getStaticPaths: GetStaticPaths = async (context) => {
   const paths: MultilingualStaticPath[] = []
   const { locales } = getStaticPathsLocales(context)
   locales.forEach((locale) => {
+    // Create paths without parameters (this is an optional catch-all route).
+    paths.push({
+      params: {
+        category: [],
+      },
+      locale,
+    })
+    // Create localized paths.
     const messages = getMessages(locale)
     messages.getAll().forEach((firstMessages) => {
       if (firstMessages.key.startsWith('categoryParameter')) {

diff --git a/example/src/components/language-switcher/LanguageSwitcher.tsx b/example/src/components/language-switcher/LanguageSwitcher.tsx
@@ -34,21 +34,25 @@ export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({ localizedRou
       <div className={isOver ? styles.over : ''}>
         {locales
           .filter((locale) => locale !== currentLocale)
-          .map((locale) => (
-            <Link
-              key={locale}
-              href={href}
-              locale={locale}
-              localizedRouteParameters={localizedRouteParameters}
-              data-cy="language-switcher-link"
-              onClick={() => {
-                setCookieLocale(locale)
-              }}
-              lang={normalizeLocale(locale)}
-            >
-              {(localeStrings as KeyValueObject)[normalizeLocale(locale)]}
-            </Link>
-          ))}
+          .map((locale) => {
+            const normalizedLocale = normalizeLocale(locale)
+            return (
+              <Link
+                key={locale}
+                href={href}
+                locale={locale}
+                localizedRouteParameters={localizedRouteParameters}
+                data-cy="language-switcher-link"
+                onClick={() => {
+                  setCookieLocale(locale)
+                }}
+                lang={normalizedLocale}
+                hrefLang={normalizedLocale}
+              >
+                {(localeStrings as KeyValueObject)[normalizedLocale]}
+              </Link>
+            )
+          })}
       </div>
     </div>
   )