general: fix lang links for bots (vercel bug) (#848)

zbycz · Dec 19, 2024 · 91ac420 · 91ac420
1 parent 0ef0b68
commit 91ac420
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 23 deletions.
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -18,9 +18,9 @@ import { InjectIntl, setIntl } from '../src/services/intl';
 import { FaviconsOsmapp } from '../src/helpers/FaviconsOsmapp';
 import { PROJECT_ID, setProjectForSSR } from '../src/services/project';
 import { FaviconsOpenClimbing } from '../src/helpers/FaviconsOpenClimbing';
-import { LANGUAGES } from '../src/config.mjs';
 import styled from '@emotion/styled';
 import { logRequest } from '../src/server/logRequest';
+import { getUrlForLangLinks, LangLinks } from '../src/helpers/LangLinks';
 
 const Body = styled.body`
   @media (prefers-color-scheme: light) {
@@ -31,17 +31,18 @@ const Body = styled.body`
   }
 `;
 
-type Props = DocumentInitialProps &
-  DocumentProps &
+type InitialProps = DocumentInitialProps &
   DocumentHeadTagsProps & {
     serverIntl: Awaited<ReturnType<typeof getServerIntl>>;
-    asPath: string;
+    urlForLangLinks: string | false;
   };
 
+type Props = DocumentProps & InitialProps;
+
 export default class MyDocument extends Document<Props> {
   render() {
     const isOpenClimbing = PROJECT_ID === 'openclimbing';
-    const { serverIntl, asPath, emotionStyleTags } = this.props;
+    const { serverIntl, urlForLangLinks, emotionStyleTags } = this.props;
 
     return (
       <Html lang={serverIntl.lang}>
@@ -66,15 +67,7 @@ export default class MyDocument extends Document<Props> {
           <link rel="preconnect" href="https://commons.wikimedia.org" />
           <link rel="preconnect" href="https://www.wikidata.org" />
           <link rel="preconnect" href="https://en.wikipedia.org" />
-          {/* only for bots - we dont need to change this after SSR: */}
-          {Object.keys(LANGUAGES).map((lang) => (
-            <link
-              key={lang}
-              rel="alternate"
-              hrefLang={lang}
-              href={`/${lang}${asPath}`}
-            />
-          ))}
+          <LangLinks urlForLangLinks={urlForLangLinks} />
 
           {isOpenClimbing ? <FaviconsOpenClimbing /> : <FaviconsOsmapp />}
           {/* <style>{`body {background-color: #eb5757;}`/* for apple PWA translucent-black status bar *!/</style> */}
@@ -89,12 +82,6 @@ export default class MyDocument extends Document<Props> {
   }
 }
 
-type InitialProps = DocumentInitialProps &
-  DocumentHeadTagsProps & {
-    serverIntl: Awaited<ReturnType<typeof getServerIntl>>;
-    asPath: string | undefined;
-  };
-
 MyDocument.getInitialProps = async (
   ctx: DocumentContext,
 ): Promise<InitialProps> => {
@@ -110,6 +97,6 @@ MyDocument.getInitialProps = async (
   return {
     ...initialProps,
     serverIntl,
-    asPath: ctx.asPath,
+    urlForLangLinks: getUrlForLangLinks(ctx),
   };
 };
diff --git a/src/components/FeaturePanel/ParentLink.tsx b/src/components/FeaturePanel/ParentLink.tsx
@@ -57,12 +57,12 @@ export const ParentLinkContent = () => {
       {hasMoreParents ? (
         <Arrow>
           {feature.parentFeatures?.map((parentFeature, i) => (
-            <>
+            <React.Fragment key={getReactKey(parentFeature)}>
               <Link href={getOsmappLink(parentFeature)} color="secondary">
                 {getLabel(parentFeature)}
               </Link>
               {feature.parentFeatures.length > i + 1 && <Comma>,</Comma>}
-            </>
+            </React.Fragment>
           ))}
         </Arrow>
       ) : (

diff --git a/src/helpers/LangLinks.tsx b/src/helpers/LangLinks.tsx
@@ -0,0 +1,44 @@
+import { LANGUAGES } from '../config.mjs';
+import React from 'react';
+import type { DocumentContext } from 'next/dist/shared/lib/utils';
+
+export const getUrlForLangLinks = (ctx: DocumentContext) => {
+  // NOTE: there are two bugs in vercel deployments
+  // 1) the asPath contains the lang prefix, even though it shouldn't
+  // 2) sometimes it adds query like ?nxtPall=node/11580044107
+  // Related issue - even though it is closed: https://github.com/vercel/next.js/issues/36275
+
+  const fixedPath = ctx.asPath
+    .replace(/\?nxtPall=.*$/, '')
+    .replace(/^\/[a-z]{2}(\/|$)/, '$1');
+
+  if (fixedPath === '/' || fixedPath === '') {
+    return '';
+  }
+
+  if (fixedPath.match(/^\/(node|way|relation)\/\d+$/)) {
+    return fixedPath;
+  }
+
+  return false;
+  // Test cases: /, /node/6, /en, /en/node/6
+};
+
+type Props = {
+  urlForLangLinks: string | false;
+};
+
+export const LangLinks = ({ urlForLangLinks }: Props) =>
+  urlForLangLinks === false ? null : (
+    <>
+      {/* only for bots - we dont need to change this after SSR: */}
+      {Object.keys(LANGUAGES).map((lang) => (
+        <link
+          key={lang}
+          rel="alternate"
+          hrefLang={lang}
+          href={`/${lang}${urlForLangLinks}`}
+        />
+      ))}
+    </>
+  );