feat: React-agnostic core

packages/example-advanced/README.md

@@ -1,6 +1,11 @@
 # example-advanced
 
-An example that showcases more advanced features of `next-intl`.
+An example that showcases more advanced features of `next-intl`:
+
+- [Production configuration on the provider](https://github.com/amannn/next-intl/blob/main/packages/example-advanced/src/pages/_app.tsx)
+- [Composition of component namespaces](https://github.com/amannn/next-intl/blob/main/packages/example-advanced/src/pages/index.tsx#L32-L37)
+- [Usage of messages in API routes](https://github.com/amannn/next-intl/blob/main/packages/example-advanced/src/pages/api/hello.tsx)
+
 
 You can run the example locally like this:
 

packages/example-advanced/package.json

@@ -10,6 +10,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "accept-language-parser": "1.5.0",
     "date-fns": "^2.16.1",
     "lodash": "^4.17.21",
     "next": "^12.1.4",
@@ -20,6 +21,7 @@
   },
   "devDependencies": {
     "@testing-library/react": "13.0.0",
+    "@types/accept-language-parser": "1.5.3",
     "@types/lodash": "4.14.176",
     "@types/node": "17.0.23",
     "@types/react": "18.0.0",

packages/example-advanced/src/pages/_app.tsx

@@ -1,7 +1,16 @@
 import {NextIntlProvider} from 'next-intl';
 import {AppProps} from 'next/app';
 
-export default function App({Component, pageProps}: AppProps) {
+type PageProps = {
+  messages: IntlMessages;
+  now: number;
+};
+
+type Props = Omit<AppProps<PageProps>, 'pageProps'> & {
+  pageProps: PageProps;
+};
+
+export default function App({Component, pageProps}: Props) {
   return (
     <NextIntlProvider
       // To achieve consistent date, time and number formatting

packages/example-advanced/src/pages/api/hello.tsx

@@ -0,0 +1,49 @@
+import acceptLanguageParser from 'accept-language-parser';
+import type {NextApiRequest, NextApiResponse} from 'next';
+import {createIntl, createTranslator} from 'next-intl';
+import nextConfig from '../../../next.config';
+
+// This file demonstrates how `next-intl` can
+// be used in API routes to translate messages.
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  // Next.js doesn't provide a way to get the locale from
+  // the request, so we have to parse it ourselves.
+  const locale = resolveLocale(req);
+
+  // Fetch messages based on the locale.
+  const messages = await import(`../../../messages/${locale}.json`);
+
+  // This creates the same function that is returned by `useTranslations`.
+  // Since there's no provider, you can pass all the properties you'd
+  // usually pass to the provider directly here.
+  const t = createTranslator({
+    locale,
+    messages,
+    namespace: 'Index'
+  });
+
+  // Creates the same object that is returned by `useIntl`.
+  const intl = createIntl({locale});
+
+  res.status(200).json({
+    locale,
+    key: 'Index.title',
+    message: t('title'),
+    date: intl.formatDateTime(new Date(), {dateStyle: 'medium'})
+  });
+}
+
+function resolveLocale(request: NextApiRequest) {
+  const {defaultLocale, locales} = nextConfig.i18n;
+  const locale =
+    acceptLanguageParser.pick(
+      locales,
+      request.headers['accept-language'] || defaultLocale
+    ) || defaultLocale;
+
+  return locale;
+}