Estoy usando este fragmento a continuación para traducir el contenido de mi sitio web. Sin embargo, ¿hay alguna forma de evitar copiar y pegar este código entre páginas?
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} /> </> ) }Esta es una buena oportunidad para crear su propio gancho. Básicamente, simplemente extraiga esa lógica que necesitaría reutilizar, péguela en una función y expórtela. Luego puede llamarlo como un gancho en tantos componentes como necesite.
Puede encontrar más información sobre cómo crear sus propios ganchos aquí https://reactjs.org/docs/hooks-custom.html .
Complementando lo que dijo Justin Formentin, deberá nombrar el gancho como useABC, donde ABC es el nombre que desea usar.