-
-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5ea88dd
commit b416a68
Showing
34 changed files
with
1,313 additions
and
178 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,197 +1,113 @@ | ||
| # Intlayer: Next-Level Content Management in JavaScript | ||
| # Intlayer: A closer way to translate your application | ||
|
|
||
| **Intlayer** is an innovative Content Management System (CMS) designed specifically for JavaScript developers. It enables seamless transpilation of JavaScript content into structured dictionaries, making integration into your codebase straightforward and efficient. | ||
| Intlayer is an innovative internationalization framework designed to replace i18next for Next.js and React applications. It streamlines the process of internationalization with flexible content declaration and robust configuration options. | ||
|
|
||
| ## Why Choose Intlayer? | ||
| ## Why Intlayer? | ||
|
|
||
| - **JavaScript-Powered Content Management**: Harness the flexibility of JavaScript to define and manage your content efficiently. | ||
| - **Type-Safe Environment**: Leverage TypeScript to ensure all your content definitions are precise and error-free. | ||
| - **Integrated Content Files**: Keep your translations close to their respective components, enhancing maintainability and clarity. | ||
| - **Simplified Setup**: Get up and running quickly with minimal configuration, especially optimized for Next.js projects. | ||
| - **Server Component Support**: Perfectly suited for Next.js server components, ensuring smooth server-side rendering. | ||
| - **Enhanced Routing**: Full support for Next.js app routing, adapting seamlessly to complex application structures. | ||
| Intlayer offers a more modern approach to internationalization compared to traditional frameworks like i18next. It is designed to fit seamlessly into Next.js and React projects, providing intuitive content declaration, robust configuration options, and a simpler setup process. | ||
|
|
||
| ## Getting Started with Intlayer | ||
| - **Content Declaration**: Declare content dictionaries in the same directory as your components, enhancing maintainability and reducing complexity. [Learn more](https://github.com/aypineau/intlayer/blob/main/docs/content_declaration.md). | ||
| - **Customizable Configuration**: Intlayer allows you to customize various aspects of the framework, including internationalization, middleware, and content handling. [Learn how to configure](https://github.com/aypineau/intlayer/blob/main/docs/configuration.md). | ||
| - **Integration with Next.js and React**: Intlayer integrates smoothly with Next.js and React applications. It also supports server-side rendering and dynamic routing. [Explore Next.js integration](https://github.com/aypineau/intlayer/blob/main/docs/intlayer_with_nextjs.md) | [Explore React integration](https://github.com/aypineau/intlayer/blob/main/docs/intlayer_with_create_react_app.md). | ||
| - **Scalability and Consistency**: With Intlayer, your content dictionaries are structured and consistent, reducing the chances of errors during development. This ensures a more reliable internationalization process. | ||
| - **TypeScript Support**: Intlayer provides full support for TypeScript, allowing for more type-safe code. This enhances developer productivity and code quality. | ||
|
|
||
| Setting up Intlayer in a Next.js application is straightforward: | ||
| ## Getting Started | ||
|
|
||
| ### Step 1: Install Dependencies | ||
| To start using Intlayer, follow these steps: | ||
|
|
||
| Install the necessary packages using npm: | ||
| ### Installation | ||
|
|
||
| Install the necessary packages for your project: | ||
|
|
||
| ```bash | ||
| npm install intlayer next-intlayer | ||
| npm install intlayer | ||
| ``` | ||
|
|
||
| ```bash | ||
| yarn install intlayer next-intlayer | ||
| yarn add intlayer | ||
| ``` | ||
|
|
||
| ```bash | ||
| pnpm install intlayer next-intlayer | ||
| pnpm add intlayer | ||
| ``` | ||
|
|
||
| ### Step 2: Integrate Intlayer in Your Next.js Configuration | ||
| ### Declaring Your Content | ||
|
|
||
| Configure your Next.js setup to use Intlayer: | ||
| Intlayer allows you to declare your content in various formats, including TypeScript, ECMAScript modules, CommonJS modules, and JSON. Here's an example of a content declaration using TypeScript: | ||
|
|
||
| ```javascript | ||
| // next.config.mjs | ||
| import { withIntlayer } from "next-intlayer/server"; | ||
| ```typescript | ||
| import { t, type ContentModule } from "intlayer"; | ||
|
|
||
| const nextConfig = {}; | ||
| const exampleContent: ContentModule = { | ||
| id: "example", | ||
| welcome: t({ | ||
| en: "Welcome", | ||
| fr: "Bienvenue", | ||
| es: "Bienvenido", | ||
| }), | ||
| }; | ||
|
|
||
| export default withIntlayer(nextConfig); | ||
| export default exampleContent; | ||
| ``` | ||
|
|
||
| ### Step 3: Configure Middleware for Locale Detection | ||
| For more examples and information on content declaration, [see the documentation](https://github.com/aypineau/intlayer/blob/main/docs/content_declaration.md). | ||
|
|
||
| Set up middleware to detect the user's preferred locale: | ||
| ### Integrating with Next.js | ||
|
|
||
| ```typescript | ||
| // src/middleware.ts | ||
| export { intlayerMiddleware as middleware } from 'next-intlayer/middleware'; | ||
| If you're using Next.js, Intlayer is designed to work seamlessly with it. The integration process involves setting up middleware, defining locale routes, and utilizing content dictionaries in your components. | ||
|
|
||
| export const config = { | ||
| matcher: '/((?!api|static|._\\.._|\_next).*), | ||
| }; | ||
| ``` | ||
| Follow this guide to [set up Intlayer with Next.js](https://github.com/aypineau/intlayer/blob/main/docs/intlayer_with_nextjs.md). | ||
|
|
||
| ### Step 4: Define Dynamic Locale Routes | ||
| ### Integrating with React | ||
|
|
||
| Implement dynamic routing for localized content: | ||
| For Create React App users, Intlayer also provides an easy way to integrate internationalization. Learn how to [set up Intlayer with Create React App](https://github.com/aypineau/intlayer/blob/main/docs/intlayer_with_create_react_app.md). | ||
|
|
||
| Change `src/app/page.ts` to `src/app/[locale]/page.ts` | ||
| ### Configuration | ||
|
|
||
| ### Step 5: Manage Your Content | ||
| Intlayer's configuration is highly customizable. You can define internationalization settings, middleware behavior, and more. The configuration file supports various formats like TypeScript, JavaScript, and JSON. | ||
|
|
||
| Create and manage your content dictionaries: | ||
| Here's an example configuration: | ||
|
|
||
| ```typescript | ||
| // src/app/[locale]/page.content.ts | ||
| import { t, type ContentModule } from "intlayer"; | ||
| // intlayer.config.ts | ||
|
|
||
| import { Locales, type IntlayerConfig } from "intlayer"; | ||
|
|
||
| const pageContent: ContentModule = { | ||
| id: "page", | ||
| getStarted: { | ||
| main: t({ | ||
| en: "Get started by editing", | ||
| fr: "Commencez par éditer", | ||
| es: "Comience por editar", | ||
| }), | ||
| pageLink: "src/app/page.tsx", | ||
| const config: IntlayerConfig = { | ||
| internationalization: { | ||
| locales: [Locales.ENGLISH], | ||
| defaultLocale: Locales.ENGLISH, | ||
| }, | ||
| }; | ||
|
|
||
| export default pageContent; | ||
| export default config; | ||
| ``` | ||
|
|
||
| ### Step 6: Utilize Content in Your Code | ||
|
|
||
| Access your content dictionaries throughout your application: | ||
|
|
||
| ```tsx | ||
| // src/app/[locale]/page.ts | ||
|
|
||
| import { ClientComponentExample } from "@component/components/ClientComponentExample"; | ||
| import { LocaleSwitcher } from "@component/components/LangSwitcherDropDown"; | ||
| import { NestedServerComponentExample } from "@component/components/NestedServerComponentExample"; | ||
| import { ServerComponentExample } from "@component/components/ServerComponentExample"; | ||
| import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer"; | ||
| import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server"; | ||
|
|
||
| const Page: NextPageIntlayer = ({ params: { locale } }) => { | ||
| const content = useIntlayer("page", locale); | ||
|
|
||
| return ( | ||
| <> | ||
| <p> | ||
| {content.getStarted.main} | ||
| <code>{content.getStarted.pageLink}</code> | ||
| </p> | ||
| {/** | ||
| * IntlayerServerProvider is used to provide the locale to the server children | ||
| * Don't work if set in the layout | ||
| */} | ||
| <IntlayerServerProvider locale={locale}> | ||
| <ServerComponentExample /> | ||
| </IntlayerServerProvider> | ||
| {/** | ||
| * IntlayerClientProvider is used to provide the locale to the client children | ||
| * Can be set in any parent component, including the layout | ||
| */} | ||
| <IntlayerClientProvider locale={locale}> | ||
| <ClientComponentExample /> | ||
| </IntlayerClientProvider> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Page; | ||
| ``` | ||
| For more information on configuring Intlayer, [check the configuration documentation](https://github.com/aypineau/intlayer/blob/main/docs/configuration.md). | ||
|
|
||
| ```tsx | ||
| // src/components/ClientComponentExample.tsx | ||
| ## Using Intlayer with i18next | ||
|
|
||
| "use client"; | ||
| Intlayer can also export i18next dictionaries for projects that still rely on i18next for certain functionalities. This integration allows you to generate i18next dictionaries while still benefiting from Intlayer's flexible content declaration. [Learn how to configure Intlayer for i18next](https://github.com/aypineau/intlayer/blob/main/docs/intlayer_with_i18n.md). | ||
|
|
||
| import { useIntlayer } from "next-intlayer"; | ||
| ## CLI Commands | ||
|
|
||
| export const ClientComponentExample = () => { | ||
| const content = useIntlayer("client-component-example"); // Create related content declaration | ||
| Intlayer comes with a CLI package that allows you to transpile your content declarations into dictionaries. You can run these commands to build your dictionaries: | ||
|
|
||
| return ( | ||
| <div> | ||
| <h2>{content.title} </h2> | ||
| <p>{content.content}</p> | ||
| </div> | ||
| ); | ||
| }; | ||
| ```bash | ||
| npx intlayer transpile | ||
| ``` | ||
|
|
||
| ```tsx | ||
| // src/components/ServerComponentExample.tsx | ||
| To run in watch mode: | ||
|
|
||
| import { useIntlayer } from "next-intlayer/server"; | ||
|
|
||
| export const ServerComponentExample = () => { | ||
| const content = useIntlayer("server-component-example"); // Create related content declaration | ||
|
|
||
| return ( | ||
| <div> | ||
| <h2>{content.title} </h2> | ||
| <p>{content.content}</p> | ||
| </div> | ||
| ); | ||
| }; | ||
| ```bash | ||
| npx intlayer watch | ||
| ``` | ||
|
|
||
| For more detailed usage of intlayer into Client, or Server component, see the [nextJS example here](https://github.com/aypineau/intlayer/blob/main/examples/nextjs-app/src/app/%5Blocale%5D/demo-usage-components/page.tsx). | ||
|
|
||
| ## Configuration of your project | ||
|
|
||
| Create a config file to configure the languages of your application: | ||
|
|
||
| ```typescript | ||
| // intlayer.config.ts | ||
|
|
||
| import { Locales, type IntlayerConfig } from "intlayer"; | ||
|
|
||
| const config: IntlayerConfig = { | ||
| internationalization: { | ||
| locales: [ | ||
| Locales.ENGLISH, | ||
| // Your other locales | ||
| ], | ||
| defaultLocale: Locales.ENGLISH, | ||
| }, | ||
| }; | ||
|
|
||
| export default config; | ||
| ``` | ||
| For more information on the CLI and its usage, [refer to the CLI documentation](https://github.com/aypineau/intlayer/blob/main/docs/intlayer_cli.md). | ||
|
|
||
| To see all available parameters, refer to the [configuration documentation here](https://github.com/aypineau/intlayer/blob/main/docs/configuration.md). | ||
| ## Conclusion | ||
|
|
||
| --- | ||
| Intlayer offers a more flexible and modern approach to internationalization. Its seamless integration with Next.js and React, customizable configuration, and support for various content declaration formats make it a powerful choice for internationalization. | ||
|
|
||
| This version emphasizes ease of use, practical steps, and the professional application of Intlayer in a Next.js environment. | ||
| For additional resources, guides, and examples, explore the [Intlayer documentation](https://github.com/aypineau/intlayer/blob/main/docs/intlayer_with_nextjs.md). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.