diff --git a/docs/src/pages/docs/workflows/typescript.mdx b/docs/src/pages/docs/workflows/typescript.mdx index d923b21e5..b5e33a569 100644 --- a/docs/src/pages/docs/workflows/typescript.mdx +++ b/docs/src/pages/docs/workflows/typescript.mdx @@ -88,11 +88,11 @@ function UserPage({user}) { TypeScript currently has a [limitation](https://github.com/microsoft/TypeScript/issues/32063) where it infers the types of an imported JSON module as rather broad. -Due to this, `next-intl` provides a stopgap solution that allows you to compile an accompanying `.d.json.ts` file for the messages that you're assigning to your `AppConfig`. +Due to this, `next-intl` provides a stopgap solution that allows you to generate an accompanying `.d.json.ts` file for the messages that you're assigning to your `AppConfig`. **Usage:** -1. Enable the `compileMessagesDeclaration` setting in your Next.js config: +1. Enable the `createMessagesDeclaration` setting in your Next.js config: ```tsx filename="next.config.mjs" import {createNextIntlPlugin} from 'next-intl/plugin'; @@ -100,7 +100,7 @@ import {createNextIntlPlugin} from 'next-intl/plugin'; const withNextIntl = createNextIntlPlugin({ experimental: { // Use the path to the messages that you're using in `AppConfig` - compileMessagesDeclaration: './messages/en.json' + createMessagesDeclaration: './messages/en.json' } }); @@ -118,8 +118,6 @@ const withNextIntl = createNextIntlPlugin({ } ``` -3. Upvote [microsoft/TypeScript#32063](https://github.com/microsoft/TypeScript/issues/32063) so that we can remove this workaround in the future. - With this setup in place, you'll see a new declaration file generated in your `messages` directory once you run `next dev` or `next build`: ```diff @@ -127,12 +125,16 @@ With this setup in place, you'll see a new declaration file generated in your `m + messages/en.d.json.ts ``` -You can choose to ignore the generated declaration file in Git: +This declaration file will provide the exact types for the messages that you're using in `AppConfig`, enabling type safety for message arguments. + +You can choose to ignore this file in Git: ```text filename=".gitignore" messages/*.d.json.ts ``` +Please consider upvoting [microsoft/TypeScript#32063](https://github.com/microsoft/TypeScript/issues/32063) so that we can hopefully remove this workaround in the future. + ## `Formats` If you're using [global formats](/docs/usage/configuration#formats), you can strictly type the format names that are referenced in calls to `format.dateTime`, `format.number` and `format.list`. diff --git a/examples/example-app-router-playground/next.config.mjs b/examples/example-app-router-playground/next.config.mjs index a323370e7..eb3878299 100644 --- a/examples/example-app-router-playground/next.config.mjs +++ b/examples/example-app-router-playground/next.config.mjs @@ -6,7 +6,7 @@ import createNextIntlPlugin from 'next-intl/plugin'; const withNextIntl = createNextIntlPlugin({ requestConfig: './src/i18n/request.tsx', experimental: { - compileMessagesDeclaration: './messages/en.json' + createMessagesDeclaration: './messages/en.json' } }); const withMdx = mdxPlugin(); diff --git a/examples/example-app-router/next.config.mjs b/examples/example-app-router/next.config.mjs index 7080f2c28..1751fe61a 100644 --- a/examples/example-app-router/next.config.mjs +++ b/examples/example-app-router/next.config.mjs @@ -4,7 +4,7 @@ import createNextIntlPlugin from 'next-intl/plugin'; const withNextIntl = createNextIntlPlugin({ experimental: { - compileMessagesDeclaration: './messages/en.json' + createMessagesDeclaration: './messages/en.json' } }); diff --git a/packages/next-intl/src/plugin/compileMessagesDeclaration.tsx b/packages/next-intl/src/plugin/compileMessagesDeclaration.tsx index 26607d878..fc1162727 100644 --- a/packages/next-intl/src/plugin/compileMessagesDeclaration.tsx +++ b/packages/next-intl/src/plugin/compileMessagesDeclaration.tsx @@ -11,17 +11,17 @@ function runOnce(fn: () => void) { fn(); } -export default function compileMessagesDeclaration(messagesPath: string) { +export default function createMessagesDeclaration(messagesPath: string) { const fullPath = path.resolve(messagesPath); if (!fs.existsSync(fullPath)) { throwError( - `\`compileMessagesDeclaration\` points to a non-existent file: ${fullPath}` + `\`createMessagesDeclaration\` points to a non-existent file: ${fullPath}` ); } if (!fullPath.endsWith('.json')) { throwError( - `\`compileMessagesDeclaration\` needs to point to a JSON file. Received: ${fullPath}` + `\`createMessagesDeclaration\` needs to point to a JSON file. Received: ${fullPath}` ); } diff --git a/packages/next-intl/src/plugin/createNextIntlPlugin.tsx b/packages/next-intl/src/plugin/createNextIntlPlugin.tsx index 45e94139f..87d81d85a 100644 --- a/packages/next-intl/src/plugin/createNextIntlPlugin.tsx +++ b/packages/next-intl/src/plugin/createNextIntlPlugin.tsx @@ -1,5 +1,5 @@ import type {NextConfig} from 'next'; -import compileMessagesDeclaration from './compileMessagesDeclaration.tsx'; +import createMessagesDeclaration from './createMessagesDeclaration.tsx'; import getNextConfig from './getNextConfig.tsx'; import type {PluginConfig} from './types.tsx'; import {warn} from './utils.tsx'; @@ -14,9 +14,9 @@ function initPlugin( ); } - if (pluginConfig.experimental?.compileMessagesDeclaration) { - compileMessagesDeclaration( - pluginConfig.experimental.compileMessagesDeclaration + if (pluginConfig.experimental?.createMessagesDeclaration) { + createMessagesDeclaration( + pluginConfig.experimental.createMessagesDeclaration ); } diff --git a/packages/next-intl/src/plugin/types.tsx b/packages/next-intl/src/plugin/types.tsx index d8f87d787..915461238 100644 --- a/packages/next-intl/src/plugin/types.tsx +++ b/packages/next-intl/src/plugin/types.tsx @@ -1,6 +1,6 @@ export type PluginConfig = { requestConfig?: string; experimental?: { - compileMessagesDeclaration?: string; + createMessagesDeclaration?: string; }; };