How to reuse a const object between pages in React?

Question

I'm using this snippet below to translate my website content. However, there's a way to avoid copying and pasting this code between pages?

import SampleSection from "../section/sample"
import { useRouter } from 'next/router'
import en from '../locales/en'
import pt from '../locales/pt'

export default function Home() {

    const router = useRouter()
    const { locale } = router
    const t = locale === 'en' ? en : pt

    const changeLanguage = (e) => {
       const locale = e.target.value;
       router.push({ pathname, query }, asPath, { locale: locale })
    }

    return (
        <>
            <SampleSection
                title={t.home.title}
            />
        </>

    )
}

Answer 1

Complementing what Justin Formentin said, you'll need to name the hook as useABC where ABC is the name you wanna use.