Navbar component translates only in root/index, not in subpages

[zes00]

Greetings!
Apologies if this question has been answered before, I saw it had been asked before, but couldn't find it had been answered.
Also apologies if i've missed something that should be obvious to everyone, I'm fairly new at this and currently trying to learn next.js and react.

TL;DR: Help wanted - shared / common Navbar component imported in Layout only translates in root, not in subroutes.

Long story:
I'm trying to build an app where the user can select their preferred language, and the content is translated accordingly.
Status so far:

Implemented a custom language picker function which works fine.

Right now just a proof of concept, but works fine. returns a simple menu where user can select their language. Selecting a new language works and page content translates correctly according to chosen language.

//languagePicker.js
import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Cookies from 'js-cookie';

const data = [
{ label: 'Norwegian', disabled: false, value: 'no' },
{ label: 'English', disabled: false, value: 'en' },
{ label: 'Swedish', disabled: true, value: 'se' },
{ label: 'Danish', disabled: true, value: 'dk'},
];

export function LanguagePicker() {
const router = useRouter()
const currentLocale = router.locale;
const findLocaleItem = (locale) => data.find(item => item.value === locale) || data[0];

const onToggleLanguageClick = (newLocale) => {
  const { pathname, asPath, query } = router;
  Cookies.set('NEXT_LOCALE', newLocale, { expires: 365 }); // playing around with using cookies to store preferred language
  router.push({ pathname, query }, asPath, { locale: newLocale });
};
const [opened, setOpened] = useState(false);
const [selected, setSelected] = useState(findLocaleItem(currentLocale));
useEffect(() => {
  setSelected(findLocaleItem(currentLocale));
}, [currentLocale]);
const items = data.map((item) => (
  <Menu.Item
    onClick={() => {
      setSelected(item); 
      onToggleLanguageClick(item.value); 
    }}
    key={item.label}
    disabled={item.disabled}
  >
    {item.label}
  </Menu.Item>
));

return (
  //returns a simple menubox where users can choose language
)
}

Translating page content works fine (example code)

Translations of actualy page contents work fine regardless of route. choosing a new language other than default route adds chosen locale to route, for example "localhost/EN/someroute/examplepage"

// /someroute/examplepage.js
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { useTranslation, Trans } from 'next-i18next'

export default function Example(props) {
const { t } = useTranslation(['common'])

return (
  <>
     {t('h1')} // some random header for an example
  </>
)
}
export async function getStaticProps({ locale }) {
return {
  props: {
    ...(await serverSideTranslations(locale, [
      'common',
      'pagecontent',
    ])),
  },
}
}

As stated in TL;DR the only real issue I'm having is getting my navbar to translate correctly across subroutes.
I'm using Next.js with pages (src directory), the Navbar component is common for all pages and being imported in shared layout.
Navbar renders and translate fines in root directory / index.js, but as soon as I navigate to any subroute it breaks.

Simplified folder structure

├── src
│   ├── components
|   |   └── shared
|   |       └── navbar.js
│   │       └── layout.js
│   ├── pages
|   |   └── misc
|   |   |    └── somepage.js
|   |   └── _app.js
|   |   └── _document.js
|   |
├── public
│   ├── locales
│   │   └── en
        |    └── common.json
|   |   └── no
|   |       └── common.json
├── package.json
├── package-lock.json
├── next-i18next.config.js
└── next.config.js

_app.js file

import Layout from '@/components/shared/layout';
import { useRouter } from 'next/router';
import { appWithTranslation } from 'next-i18next';
import nextI18nextConfig from '../../next-i18next.config';

 function App({ Component, pageProps, ...appProps }) {
  const router = useRouter();

  useEffect(() => {
    if (!Cookies.get('NEXT_LOCALE')) {
      Cookies.set('NEXT_LOCALE', router.defaultLocale, { expires: 365 });
    }
  }, [router.defaultLocale]); //playing around with cookies to get preferred locale.
  
    return(
       //a bunch of providers for authenticating, mantine, modals etc.
      <Layout >
           <Component {...pageProps} />
      </Layout>
      //a bunch of providers for authenticating, mantine, modals etc.
  )
}

export default appWithTranslation(App, nextI18nextConfig)

layout.js file

import { useAtom } from "jotai";
import Navbar2 from "./navbar2";
import { titleAtom } from "@/pages/api/content/titleHandler";
 
export default function Layout({props, children }) {
    const [title] = useAtom(titleAtom)
    
    return (
      <>
      
        <Navbar2 />
      <div className="min-h-full">
        

        <header className="bg-white shadow-sm">
          <div className="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
            <h1 className="text-lg font-semibold leading-6 text-gray-900">{title}</h1>
          </div>
        </header>
        <main>
          <div className="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">{children}</div>
        </main>
      </div>
    </>
        
    )
  }
 

and navbar2.js file (nevermind the "2" its just for testing purposes)

import { Disclosure, Popover } from '@headlessui/react'
import Link from 'next/link'
import { useEffect, useState, useRef } from 'react'
import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next'
import { LanguagePicker } from '@/components/shared/languagePicker'

export default function Navbar3() {
  
  const router = useRouter();
  const { t } = useTranslation('common');
  const currentLocale = router.locale
  const [mainMenuItems, setMenuItems] = useState([]);
  const sortedMainMenuItems = mainMenuItems.slice().sort((a, b) => a.id - b.id);
  
  useEffect(() => {
    fetch("/api/handlers/navHandler")
      .then((response) => response.json())
      .then((data) => setMenuItems(data))
      .catch((error) => console.error("Error fetching menu items:", error));
  }, []);

  function CategoryButton({ props, category }) {
    if (category.menu_items.length === 0 && category.href) {
      return (
        <Link
          prefetch={false}
          href={category.href}
          locale={currentLocale}
        >
          {t(`menus.${category.menu_name_eng}`)}
        </Link>
      );
    }
  
    return (
      <Popover>
        {({ open }) => (
          <>
            <Popover.Button
            >
              {t(`menus.${category.menu_name_eng}`)}
            </Popover.Button>
            {open && (
              <div>
                {category.menu_items.filter(item => item.enabled).map((item, index) => (
                  <Link
                  prefetch={false}
                    key={index}
                    href={item.href}
                    locale={currentLocale}
                  >- {t(`menuItems.${item.item_name_eng}`)}
                  </Link>
                ))}
              </div>
            )}
          </>
        )}
      </Popover>
    );
  }

return(
<Disclosure as="nav" className="bg-black">
          {({ open }) => (
            <>
            <div>
                <div >
                    <div >
                    <div >
                      <div>
                         {sortedMainMenuItems?.map((category, index) => (
                         <CategoryButton key={index} category={category}/>
                         ))}
                      </div>
                    </div>
                  </div>
                  <div>
                    <div >
                    <LanguagePicker/>
                    </div>
                  </div>
                </div>
              </div>
            </>
          )}
        </Disclosure>
)
}

various config files

//next.config.js
/** @type {import('next').NextConfig} */
const { i18n } = require('./next-i18next.config')
const nextConfig = {
  reactStrictMode: true,
  i18n,
}
module.exports = nextConfig

//next-i18next.config.js
/** @type {import('next-i18next').UserConfig} */
module.exports = {

    i18n: {
      defaultLocale: 'no',
      locales: ['no', 'en', 'dk', 'se'],
    },
    localePath:
    typeof window === 'undefined'
      ? require('path').resolve('./public/locales')
      : '/public/locales',
  ns: ['common'],
  }

//package.json - been testing and trying alot of different libraries, so this needs a good cleaning
{
  "name": "new-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@auth0/nextjs-auth0": "^2.2.2",
    "@headlessui/react": "^1.7.17",
    "@heroicons/react": "^2.0.18",
    "@mantine/core": "^7.6.2",
    "@mantine/dates": "^7.6.2",
    "@mantine/hooks": "^7.6.2",
    "@mantine/modals": "^7.6.2",
    "@mantine/notifications": "^7.1.0",
    "@prisma/client": "^5.3.1",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-popover": "^1.0.2",
    "@radix-ui/react-tooltip": "^1.0.2",
    "@tabler/icons-react": "^3.1.0",
    "@tanstack/react-query": "^5.28.6",
    "better-react-mathjax": "^2.0.3",
    "clsx": "^2.1.0",
    "dayjs": "^1.11.10",
    "eslint": "8.35.0",
    "eslint-config-next": "13.2.3",
    "i18next": "^23.10.1",
    "jotai": "^2.4.2",
    "js-cookie": "^3.0.5",
    "katex": "^0.16.10",
    "lucide-react": "^0.359.0",
    "mantine-react-table": "^2.0.0-beta.0",
    "next": "13.2.3",
    "next-auth": "4.22.1",
    "next-i18next": "^15.2.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-i18next": "^14.1.0",
    "react-katex": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.31",
    "postcss-preset-mantine": "^1.7.0",
    "postcss-simple-vars": "^7.0.1",
    "prisma": "^5.3.1",
    "tailwindcss": "^3.3.3"
  }
}

And for some screenshots in case I've been unable to explain my problem properly

index page with Navbar, translates correctly to chosen locale.

Navigating to any random route or page, the actual page content translates correctly, but the Navbar translations stop working.

Any help would be greatly appreciated, been reading docs and fiddling around with it for a few days now but seem to have hit a hard wall..

Best regards
(and sorry for all the spoiler boxes, i figured it would be more readable that way)

[zes00]

Yeah, so, apparantly there's a difference between reading the docs and reading (and understanding) the docs.
Issue was me not understanding how namespaces worked. (and probably not understanding how next.js renders content)

I was first setting 'common' namespace for my app-wide Navbar component on first render of index, then overriding it by setting 'pagecontent' namespace from getStaticProps on page/subroute level..

Fix:

export async function getStaticProps({ locale }) {
return {
  props: {
+    ...(await serverSideTranslations(locale, ['common','pagecontent',])), //either pass both namespaces on page level
+    ...(await serverSideTranslations(locale)), //or remove namespace array completely to pass ALL namespaces
  },
}
}

leaving this for anyone who might have the same issue.
Cheers