Next-i18Next Blocking Global State in NextJS

Question

I am using RecoilJS to pass global state between two pages in Next. This works fine, until I use next-i18next in the page receiving the variables. If I comment out the next-i18next code in the getServerSideProps of the receiving page, the Recoil atoms get passed correctly.

export const getServerSideProps = withAuthUserSSR({ whenUnauthed: 
AuthAction.REDIRECT_TO_LOGIN,})(async ({ AuthUser, req, locale }) => {
    return {
        props: {
            // ...(await serverSideTranslations(locale,
            //     [
            //         'sidebar',
            //         'search',
            //         ...
            //     ]
            // )),
        },
    };
})

However, I uncomment out this code, one of my variables get blocked. I do need to use next-i18next. Can anyone explain why it's getting blocked?

I have three Recoil atoms and am using recoil-persist to persist the data between pages as I understand Recoil doesn't do this normally:

import { recoilPersist } from 'recoil-persist'
import { atom } from "recoil";
const { persistAtom } = recoilPersist({ key: 'RSKatom' })

export const newUser = atom({
    key: "newUser",
    default: false,
    effects_UNSTABLE: [persistAtom],
})

export const newUserAvatar = atom({
    key: "newUserAvatar",
    default: null,
    effects_UNSTABLE: [persistAtom],
})

export const newName = atom({
    key: "newName",
    default: "",
    effects_UNSTABLE: [persistAtom],
})

What is unusual it that 'newUser' and 'newName' do both get passed, but 'newUserAvatar' does not. This is used to store the value of a file input field, and when the next-i18next code is uncommented out 'newUserAvatar' always becomes an empty object and is console logged as 'RECOIL AVATAR: {}'

With the code commented out as above, it works, this is the console.log:

RECOIL AVATAR:  File {name: 'sample-avatar.jpeg', lastModified: 1639308280770, lastModifiedDate: Sun Dec 12 2021 19:24:40 GMT+0800 (Central Indonesia Time), webkitRelativePath: '', size: 14744, …}

Can anyone please help?

EDIT: I don't think this is specific to Recoil. I tried React Context API as well, with the same result

score 0 · Answer 1 · answered Dec 13 '21 at 09:38

I just found the answer and wasn't sure of the etiquette for posting an answer to my own question so looked up here and this seems the best way to do it.

It seems its related to a bug detailed here in which 'Navigating between pages with or without translations causes _app remounts'. By including 'serverSideTranslations' on the first page sending the global variables, it stops the app remounting, which was causing data to be lost.

Next-i18Next Blocking Global State in NextJS

1 Answers1