search

fwojciec / simple-i18n-example

Simple example of a multilingual site in Next.js using dynamic routing.
161 stars 34 forks source link

Proposal: Extend the Link component #14

Open simonschllng opened 4 years ago

simonschllng commented 4 years ago

Proposing to add the locale at one place to the Link instead of each place. Use LocaleLink instead of Link where needed.

import Link, { LinkProps } from 'next/link'
import React from 'react'

import useTranslation from '../lib/useTranslation'

const LocaleLink: React.FC<LinkProps> = (props) => {
  const { locale } = useTranslation()
  const localized = Object.assign({}, props, {
    href: `/[lang]${props.href}`,
    as: props.as ? `/${locale}${props.as}` : `/${locale}${props.href}`
  })
  return <Link {...localized} />
}

export default LocaleLink
BiscuiTech commented 4 years ago

I don't know why I never thought of extending the default Link component. Brilliant! I'm definitely refactoring this over the weekend.

fwojciec commented 4 years ago

Looks great to me! Do you want to make a pull request?