{"id":14970000,"url":"https://github.com/stevensacks/storybook-next-intl","last_synced_at":"2026-03-09T18:22:14.723Z","repository":{"id":249696374,"uuid":"832245806","full_name":"stevensacks/storybook-next-intl","owner":"stevensacks","description":"Add next-intl support to Storybook","archived":false,"fork":false,"pushed_at":"2025-11-07T06:22:26.000Z","size":503,"stargazers_count":20,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-07T08:21:19.157Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stevensacks.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-07-22T16:03:07.000Z","updated_at":"2025-11-07T06:22:30.000Z","dependencies_parsed_at":"2024-09-23T06:01:15.793Z","dependency_job_id":"cf34868b-39ab-4dc3-b208-6abb531c9a9e","html_url":"https://github.com/stevensacks/storybook-next-intl","commit_stats":{"total_commits":23,"total_committers":1,"mean_commits":23.0,"dds":0.0,"last_synced_commit":"b5cdbed8005243af2162e73b56d03686aca0f9aa"},"previous_names":["stevensacks/storybook-next-intl"],"tags_count":20,"template":false,"template_full_name":"storybookjs/addon-kit","purl":"pkg:github/stevensacks/storybook-next-intl","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevensacks%2Fstorybook-next-intl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevensacks%2Fstorybook-next-intl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevensacks%2Fstorybook-next-intl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevensacks%2Fstorybook-next-intl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stevensacks","download_url":"https://codeload.github.com/stevensacks/storybook-next-intl/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevensacks%2Fstorybook-next-intl/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30301911,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T14:33:48.460Z","status":"ssl_error","status_checked_at":"2026-03-09T14:33:48.027Z","response_time":61,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-24T13:42:50.137Z","updated_at":"2026-03-09T18:22:14.711Z","avatar_url":"https://github.com/stevensacks.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Storybook next-intl addon\n\nEasy next-intl Storybook integration.\n\nRequired Peer Dependencies:\n* 10.x - storybook - `^10.0.0`\n* 2.x - storybook - `^9.0.0`\n* 1.x - storybook - `^8.2.0`\n\n* next-intl - `^3.0.0 || ^4.0.0`\n\nThis Storybook addon assumes your project is already set up with [next-intl](https://next-intl-docs.vercel.app/), and that it is properly configured and working.\n\n## Installation\n\nInstall this addon as a devDependency.\n\n```bash\nnpm i -D storybook-next-intl\n```\n\n## Usage\n\nAfter installing, follow these 3 steps to enable this addon in Storybook.\n\n### main.ts\nInsert this addon into your addons array:\n```typescript\n{\n  addons: [\n    // other addons...\n    'storybook-next-intl',\n  ]\n}\n```\n---\n\n### next-intl.ts\nCreate a file in your `.storybook` folder called `next-intl.ts` (or whatever you like). \n\nIn this file, copy and paste the below code and make whatever modifications you need (paths to messages files, etc.).\n```typescript\nimport en from '../src/messages/en.json';\nimport fr from '../src/messages/fr.json';\nimport ja from '../src/messages/ja.json';\n\nconst messagesByLocale: Record\u003cstring, any\u003e = {en, fr, ja};\n\nconst nextIntl = {\n  defaultLocale: 'en',\n  messagesByLocale,\n};\n\nexport default nextIntl;\n```\n\nYou can also include options such as [formats](https://next-intl-docs.vercel.app/docs/usage/configuration#formats), [defaultTranslationValues](https://next-intl-docs.vercel.app/docs/usage/configuration#default-translation-values), [onError and getMessageFallback](https://next-intl-docs.vercel.app/docs/usage/configuration#error-handling).\n```typescript\nconst nextIntl = {\n  defaultLocale: 'en',\n  messagesByLocale,\n  formats: {/* your settings */},\n  defaultTranslationValues: {/* your settings */},\n  onError: (error) =\u003e console.error(error),\n  getMessageFallback: ({namespace, key}) =\u003e `${namespace}.${key}`,\n};\n```\n---\n\n### preview.ts\nIn your `preview.ts`, you need to add the `locales` and `locale` to `initialGlobals`, as well as adding `nextIntl` that you exported from the above file to parameters.\n\n`locales` is an object where the keys are the \"ids\" of the locales/languages and the values are the names you want to display in the dropdown.\n\n`locale` is what you want the default locale to be.\n\n```typescript\nimport nextIntl from './next-intl';\n\nconst preview: Preview = {\n    initialGlobals: {\n        locale: 'en',\n        locales: {\n            en: 'English',\n            fr: 'Français',\n            ja: '日本語',\n        },\n    },\n    parameters: {\n      nextIntl,\n    },\n};\n\nexport default preview;\n```\n\nYou can also use full locale strings as keys. It depends on your next-intl configuration.\n\n```typescript\nimport nextIntl from './next-intl';\n\nconst preview: Preview = {\n    initialGlobals: {\n        locale: 'en_US',\n        locales: {\n            en_US: 'English (US)',\n            en_GB: 'English (GB)',\n            fr_FR: 'Français',\n            ja_JP: '日本語',\n        },\n    },\n    parameters: {\n      nextIntl,\n    },\n};\n\nexport default preview;\n```\n\n\nThe `locales` object can also have values as an object with keys of `title`, `left`, or `right`.\n\nThis is useful if you want to include an emoji flag or some other string to the left or right side.\n\nFor example:\n```typescript\nimport nextIntl from './next-intl';\n\nconst preview: Preview = {\n    initialGlobals: {\n        locale: \"en\",\n        locales: {\n            en: {icon: '🇺🇸', title: 'English', right: 'EN'},\n            fr: {icon: '🇫🇷', title: 'Français', right: 'FR'},\n            ja: {icon: '🇯🇵', title: '日本語', right: 'JA'},\n        },\n    },\n    parameters: {\n      nextIntl,\n    },\n};\n\nexport default preview;\n```\n\nOr something like this:\n```typescript\nimport nextIntl from './next-intl';\n\nconst preview: Preview = {\n    initialGlobals: {\n        locale: 'en_US',\n        locales: {\n            en_US: {title: 'English', right: 'US'},\n            en_GB: {title: 'English', right: 'GB'},\n            fr_FR: {title: 'Français', right: 'FR'},\n            ja_JP: {title: '日本語', right: 'JA'},\n        },\n    },\n    parameters: {\n      nextIntl,\n    },\n};\n\nexport default preview;\n```\n\n## Story Parameters Locale\n\nIf you want to have a story use a specific locale, set it in that Story's parameters.\n\n```typescript jsx\nexport const Default: StoryObj = {\n    render: () =\u003e \u003cYourComponent/\u003e,\n};\n\nexport const Japanese: StoryObj = {\n    parameters: {\n        locale: 'ja',\n    },\n    render: () =\u003e \u003cYourComponent/\u003e,\n};\n```\nNote that doing this switches the current locale to the parameter one, so when you change to a story without a parameter, it will stay at the last selected locale.\n\nIn the above example, if you view the Japanese story and then click back on the Default story, the locale will stay `ja`.\n\n---\nOnce you have finished these steps and launch storybook, you should see a globe icon in the toolbar.\n\nClicking this globe icon will show a dropdown with the locales you defined in `parameters`. \n\nSwitching locales will use the strings defined in your locale json files.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstevensacks%2Fstorybook-next-intl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstevensacks%2Fstorybook-next-intl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstevensacks%2Fstorybook-next-intl/lists"}