How to use next-translate - 9 common examples
To help you get started, we’ve selected a few next-translate examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
vinissimus / next-translate / examples / static-site / pages_ / more-examples / index.js View on Github 
export default function MoreExamples() {
const { t, lang } = useTranslation()
const exampleWithVariable = t('more-examples:example-with-variable', {
count: 42,
})
return (
<>
<header>
<h2>{exampleWithVariable}</h2>
, <b>]}
/>
<br>
{t`more-examples:nested-example.very-nested.nested`}</b></header>export default function PluralExample() {
const [count, setCount] = useState(0)
const { t } = useTranslation()
useEffect(() => {
const interval = setInterval(() => {
setCount(v => (v === 5 ? 0 : v + 1))
}, 1000)
return () => clearInterval(interval)
}, [])
return <p>{t('more-examples:plural-example', { count })}</p>
}export default function Home() {
const { t, lang } = useTranslation()
const description = t('home:description')
const linkName = t('home:more-examples')
return (
<>
<header>
<p>{description}</p>
<a>{linkName}</a>
)
}
</header>export default function PluralExample() {
const [count, setCount] = useState(0)
const { t } = useTranslation()
useEffect(() => {
const interval = setInterval(() => {
setCount(v => (v === 5 ? 0 : v + 1))
}, 1000)
return () => clearInterval(interval)
}, [])
return <p>{t('more-examples:plural-example', { count })}</p>
}export default function Header() {
const { t, lang } = useTranslation()
const title = t('common:title')
return (
<>
<title>
{title} | ({lang.toUpperCase()})
</title>
<header>
<h1>{title}</h1>
{lang !== 'es' && (
<a>Español</a>
</header>export default function MoreExamples() {
const { t, lang } = useTranslation()
const exampleWithVariable = t('more-examples:example-with-variable', {
count: 42,
})
return (
<>
<h2>{exampleWithVariable}</h2>
, <b>]}
/>
<br>
{t`more-examples:nested-example.very-nested.nested`}
<br></b>export default function Header() {
const { t, lang } = useTranslation()
const title = t('common:title')
return (
<>
<title>
{title} | ({lang.toUpperCase()})
</title>
<header>
<h1>{title}</h1>
{lang !== 'es' && (
<a>Español</a>
</header>export default function Home() {
const { t, lang } = useTranslation()
const description = t('home:description')
const linkName = t('home:more-examples')
return (
<>
<header>
<p>{description}</p>
<a>{linkName}</a>
)
}
</header>import appWithI18n from 'next-translate/appWithI18n'
import i18nConfig from '../i18n'
function MyApp({ Component, pageProps }) {
return
}
export default appWithI18n(MyApp, i18nConfig)next-translate
Tiny and powerful i18n tools (Next plugin + API) to translate your Next.js pages.
