fixed canonical URL

.drone.yml

@@ -31,11 +31,13 @@ steps:
     environment:
       NEXT_PUBLIC_API_HOST: https://pig.vault48.org/
       NEXT_PUBLIC_REMOTE_CURRENT: https://pig.vault48.org/static/
+      NEXT_PUBLIC_PUBLIC_HOST: https://vault48.org/
     settings:
       dockerfile: docker/nextjs/Dockerfile
       build_args_from_env:
         - NEXT_PUBLIC_API_HOST
         - NEXT_PUBLIC_REMOTE_CURRENT
+        - NEXT_PUBLIC_PUBLIC_HOST
       tag:
         - ${DRONE_BRANCH}
       custom_labels:
@@ -56,11 +58,13 @@ steps:
     environment:
       NEXT_PUBLIC_API_HOST: https://pig.staging.vault48.org/
       NEXT_PUBLIC_REMOTE_CURRENT: https://pig.staging.vault48.org/static/
+      NEXT_PUBLIC_PUBLIC_HOST: https://staging.vault48.org/
     settings:
       dockerfile: docker/nextjs/Dockerfile
       build_args_from_env:
         - NEXT_PUBLIC_API_HOST
         - NEXT_PUBLIC_REMOTE_CURRENT
+        - NEXT_PUBLIC_PUBLIC_HOST
       tag:
         - ${DRONE_BRANCH}
       custom_labels:

src/pages/_app.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import App from 'next/app';
 import Head from 'next/head';
 
 import { PageCoverProvider } from '~/components/containers/PageCoverProvider';
@@ -9,6 +10,7 @@ import { MainLayout } from '~/containers/main/MainLayout';
 import { DragDetectorProvider } from '~/hooks/dom/useDragDetector';
 import { Sprites } from '~/sprites/Sprites';
 import { getMOBXStore } from '~/store';
+import { CONFIG } from '~/utils/config';
 import { StoreContextProvider } from '~/utils/context/StoreContextProvider';
 import { UserContextProvider } from '~/utils/context/UserContextProvider';
 import { AudioPlayerProvider } from '~/utils/providers/AudioPlayerProvider';
@@ -22,7 +24,12 @@ import '~/styles/main.scss';
 
 const mobxStore = getMOBXStore();
 
-export default function MyApp({ Component, pageProps }) {
+export default class MyApp extends App {
+  render() {
+    const { Component, pageProps, router } = this.props;
+    const canonicalURL =
+      !!CONFIG.publicHost && new URL(router.asPath, CONFIG.publicHost).toString();
+
     return (
       <StoreContextProvider store={mobxStore}>
         <SWRConfigProvider>
@@ -38,6 +45,8 @@ export default function MyApp({ Component, pageProps }) {
                             name="viewport"
                             content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=0"
                           />
+
+                          {!!canonicalURL && <link rel="canonical" href={canonicalURL} />}
                         </Head>
 
                         <MainLayout>
@@ -58,3 +67,4 @@ export default function MyApp({ Component, pageProps }) {
       </StoreContextProvider>
     );
   }
+}

src/utils/config/index.ts

@@ -1,7 +1,10 @@
 export const CONFIG = {
-  apiHost: process.env.REACT_APP_API_HOST || process.env.NEXT_PUBLIC_API_HOST || '',
-  remoteCurrent:
-    process.env.REACT_APP_REMOTE_CURRENT || process.env.NEXT_PUBLIC_REMOTE_CURRENT || '',
+  // https://vault48.org/ by default
+  publicHost: process.env.NEXT_PUBLIC_PUBLIC_HOST,
+  // backend endpoint
+  apiHost: process.env.NEXT_PUBLIC_API_HOST || '',
+  // image storage endpoint (sames as backend, but with /static usualy)
+  remoteCurrent: process.env.NEXT_PUBLIC_REMOTE_CURRENT || '',
   // transitional prop, marks migration to nextjs
   isNextEnvironment: !!process.env.NEXT_PUBLIC_REMOTE_CURRENT || typeof window === 'undefined',
 };