Animación cuando cambio una configuración regional: movimiento del enmarcador

¿Es posible en Next.js que cuando cambio una configuración regional (i18n) de una a otra haya una animación? Probé componentes de orden superior pero no funciona. mi HOC

 import { motion } from 'framer-motion'
 import { chakra, shouldForwardProp } from '@chakra-ui/react'
 
 const StyledDiv = chakra(motion.div, {
 shouldForwardProp: prop => {
 return shouldForwardProp(prop) || prop === 'transition'
 }
 })
 
 const Section = ({ children, delay = 0 }) => (
 <StyledDiv
 initial={{ y: 10, opacity: 0 }}
 animate={{ y: 0, opacity: 1 }}
 transition={{ duration: 0.8, delay }}
 mb={6}
 >
 {children}
 </StyledDiv>
 )
 
 export default function WithAnimation(Component) {
 return props => (
 <Section>
 <Component {...props} />
 </Section>
 )
}

_aplicación js

//(...)
import Layout from '../components/layouts/main'
import WithAnimation from '../components/with-animation'
function Website({ Component, pageProps, router }) {
 const { locale } = router
 const t = locale === 'en'? en: pl
 return (
 <ChakraProvider theme={theme}>
 <Fonts />
 <Layout router={router}>
 <Component {...pageProps} key={router.route} />
 </Layout>
 <MessengerCustomerChat
 pageId="secretxxxxxxxxx"
 appId="secretxxxxxxxxxxxxxx"
 language={t.messengerChatLang}
 loggedInGreeting={t.loggedInGreetingLang}
 themeColor={t.themeColorLang}
 />
 </ChakraProvider>
 )
}
export default WithAnimation(Website)

Renderizo en mi Websitecomponente con HOCWithAnimation(Website)

// actualización 1: main.js (componente de diseño en _app.js)

import NavBar from '../navbar'
import { Box, Container } from '@chakra-ui/react'
import Footer from '../footer'
const Main = ({ children, router }) => {
 return (
 <Box as="main">
 <NavBar path={router.asPath} />
 <Container maxW="container.md" pt={14}>
 {children}
 <Footer />
 </Container>
 </Box>
 )
}
export default Main

quiero animar

 <Container maxW="container.md" pt={14}>
 {children}
 <Footer />
 </Container>

cuando cada vez que se cambia una configuración regional (i18n)

Solución del problema

Tiene varias formas de hacerlo, pero centrándose en su caso, puede agregar AnimatePresencey usar router.localecomo disparador para la animación, así:

import { motion, AnimatePresence } from 'framer-motion'
import { useRouter } from 'next/router'
import { chakra, shouldForwardProp } from '@chakra-ui/react'
const StyledDiv = chakra(motion.div, {
 shouldForwardProp: prop => {
 return shouldForwardProp(prop) || prop === 'transition'
 }
})
const Section = ({ children, delay = 0 }) => {
 const router = useRouter()
 return (
 <AnimatePresence exitBeforeEnter>
 <StyledDiv
 // pass the router.locale as the key, so every time it change it will trigger the animation
 key={router.locale}
 initial={{ y: 10, opacity: 0 }}
 animate={{ y: 0, opacity: 1 }}
 transition={{ duration: 0.8, delay }}
 mb={6}
 >
 {children}
 </StyledDiv>
 </AnimatePresence>
 )
}
export default function WithAnimation(Component) {
 return props => (
 <Section>
 <Component {...props} />
 </Section>
 )
}

No sé si ya lo hiciste, pero en tu next.config.jsdebes agregar los locales:

// next.config.js
module.exports = {
 i18n: {
 locales: ["en-US", "fr", "nl-NL"],
 defaultLocale: "en-US",
 domains: [
 {
 domain: "example.com",
 defaultLocale: "en-US"
 },
 {
 domain: "example.nl",
 defaultLocale: "nl-NL"
 },
 {
 domain: "example.fr",
 defaultLocale: "fr",
 http: true
 }
 ]
 }
};

es solo un ejemplo que obtuve de nextJs docs, pero debería funcionar.

Si desea obtener más información sobre el animatePresence, eche un vistazo a los documentos de framer-motion.

También les dejo un ejemplo básico con codesandbox, échenle un vistazo.