6124e7d20c
This PR implements Internationalized Routing using formatjs / react-intl. ## Changelog - Updated formatjs to latest version - Remove deprecated babel-react-intl-plugin in favor of babel-formatjs-plugin - Remove server in favour of Internationalized Routing - Added linter with formatjs rules - Refactored JSX - Added missing types - Auto run formtjs script via before hooks - Adjusted readme docs - Added message descriptions - Removed default configs fixes #27870 ## Bug - [x] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [x] Make sure the linting passes
37 lines
952 B
TypeScript
37 lines
952 B
TypeScript
import { ReactChild } from 'react'
|
|
import { useIntl } from 'react-intl'
|
|
import Head from 'next/head'
|
|
import Nav from './Nav'
|
|
|
|
interface LayoutProps {
|
|
title?: string
|
|
description?: string
|
|
children: ReactChild | ReactChild[]
|
|
}
|
|
|
|
export default function Layout({ title, description, children }: LayoutProps) {
|
|
const intl = useIntl()
|
|
return (
|
|
<>
|
|
<Head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>
|
|
{title ||
|
|
intl.formatMessage({
|
|
defaultMessage: 'React Intl Next.js Example',
|
|
description: 'Default document title',
|
|
})}
|
|
{description ||
|
|
intl.formatMessage({
|
|
defaultMessage: 'This page is powered by Next.js',
|
|
description: 'Default document description',
|
|
})}
|
|
</title>
|
|
</Head>
|
|
<header>
|
|
<Nav />
|
|
</header>
|
|
{children}
|
|
</>
|
|
)
|
|
}
|