Sweep: Application Translation Next Intl

[0xGeegZ]

Issue: Application Translation - Next.js TypeScript Application Translation using next-intl

Objective

The goal of this issue is to translate specific components in our Next.js application using the next-intl package.

Files to translate:

• src/components/landing/hero/hero.tsx
• src/components/landing/partners/technologies.tsx
• src/components/landing/testimonials/testimonial-highlight.tsx
• src/components/landing/features/column/feature-sections.tsx

Expected Behavior

Once the translation is implemented successfully, the application should display the content of the mentioned components in the user's preferred language, as specified in the i18n configuration.

Actual Behavior

Currently, the components are only displaying content in the default language (English).

How to Solve

Step 1: Understand the Translation Files Structure

The English translations for the application are located in src/i18n/messages/en.json. You will insert the English translations for the components here. Each file should have its own namespace.

For example, for stats.tsx component, you must have a namespace such as "stats": {} in the en.json file.

Step 2: Determine if the Component is a Client Component or a Server Component

Client Component:

• Has the use client instruction at the top of the file.
• The component function definition is not an async function.
  • E.g., export function StarterPacksTestimonials() {}

Server Component:

• Do NOT Have the use client instruction at the top of the file.
• The component function definition is an async function.
  • E.g., export default async function StarterPacksPage() {}

Step 3: Implement the Translation

The implementation of the translation depends on whether the component is a client component or a server component. The changes you need to make in each component are:

1. Import next-intl in the right way (depending if it's a client or server component).
2. Replace hardcoded text strings with translation function calls from the next-intl package.
3. Add the appropriate namespace to the translation function calls.
4. Add the English translations to the src/i18n/messages/en.json file.

Let's take a look at some examples based on the files you provided.

Example 1: Server Component (StaterPacksPage)

In this case, we are using the getTranslations function from next-intl/server.

import { getTranslations } from "next-intl/server"

...

export default async function StaterPacksPage({
  params,
}: StaterPacksPageProps) {
  ...
  const t = await getTranslations("starterPack")
  ...

  // using the translation function
  <h1 className="font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl">
    {folder.name} <br />
    {t("heroTitle")}
  </h1>
  ...
}

In the above code snippet, we've imported the getTranslations function from next-intl/server as this is a server component. We then use the getTranslations function to get translations for the starterPack namespace. The translation function t is then used to replace hardcoded strings. For example, {t("heroTitle")} will get the translated text for the heroTitle key in the starterPack namespace from en.json.

Example 2: Client Component (StarterPacksTestimonials)

In this case, we are using the useTranslations hook from next-intl.

import { useTranslations } from "next-intl"

export function StarterPacksTestimonials() {
  const t = useTranslations("testimonials")

  // using the translation function
  <h2 className="font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl">
    {t("heroTitle")}
  </h2>
  ...
}

In the above code snippet, we've imported the useTranslations hook from next-intl as this is a client component. We then use the useTranslations hook to get translations for the testimonials namespace. The translation function t is then used to replace hardcoded strings. For example, {t("heroTitle")} will get the translated text for the heroTitle key in the testimonials namespace from en.json. For a detailed guide on how to implement translations in client components and server components, refer to the following resources:

• Next.js 13: Internationalization (i18n) in Client Components
• Next.js 13: Internationalization (i18n) in Server Components

Step 4: Review Example Files

You have to refer to the following files that have already been translated to understand how to apply translations, so check them carefully:

-

You must use these examples to apply the translation in the same way and be sure to manage Server Component and Client Component in the correct manner.

And do not forget to add translation for each component in the src/i18n/messages/en.json file, this is critical so your pull request have to include en.json file with new translations.

Summary

By following these steps, you should be able to successfully translate the necessary components and enhance our application's internationalization. Remember to replace the hardcoded text strings with translation function calls from the next-intl package and to add the appropriate namespace to the translation function calls.

Please, set the same title for your pull request as the issue title. And please, add comments only if it helps to understand your code.

If you encounter any issues or have any questions, feel free to ask for help. Happy coding!

Checklist

- [X] ``src/components/landing/hero/hero.tsx`` ✅ Commit b0b7815 - [X] ``src/components/landing/partners/technologies.tsx`` ✅ Commit 76098a0 - [X] ``src/components/landing/testimonials/testimonial-highlight.tsx`` ✅ Commit de648bf - [X] ``src/components/landing/features/column/feature-sections.tsx`` ✅ Commit 95af774 

[sweep-open-router[bot]]

Here's the PR! https://github.com/0xGeegZ/ai-micro-saas-starter/pull/13.

💎 Sweep Pro: I'm creating this ticket using GPT-4. You have unlimited GPT-4 tickets.

---

Actions (click)

• [ ] ↻ Restart Sweep

---

Step 1: 🔎 Searching

I found the following snippets in your repository. I will now analyze these snippets and come up with a plan.

Some code snippets I looked at (click to expand). If some file is missing from here, you can mention the path in the ticket description.

https://github.com/0xGeegZ/ai-micro-saas-starter/blob/dbf041981bfa9629baa7cc08d32f207227a58415/src/i18n/messages/en.json#L1-L42 https://github.com/0xGeegZ/ai-micro-saas-starter/blob/dbf041981bfa9629baa7cc08d32f207227a58415/src/components/landing/hero/hero.tsx#L1-L61 https://github.com/0xGeegZ/ai-micro-saas-starter/blob/dbf041981bfa9629baa7cc08d32f207227a58415/src/components/landing/partners/technologies.tsx#L1-L97 https://github.com/0xGeegZ/ai-micro-saas-starter/blob/dbf041981bfa9629baa7cc08d32f207227a58415/src/components/landing/features/column/feature-sections.tsx#L1-L105 https://github.com/0xGeegZ/ai-micro-saas-starter/blob/dbf041981bfa9629baa7cc08d32f207227a58415/src/components/landing/testimonials/testimonial-highlight.tsx#L1-L51

I also found the following external resources that might be helpful:

**Summaries of links found in the content:** https://next-intl-docs.vercel.app/docs/getting-started/app-router-server-components: The page provides a guide on how to implement application translation using the `next-intl` package in a Next.js TypeScript application. It starts by explaining the file structure for translations and then distinguishes between client components and server components. For client components, the guide demonstrates how to import the `useTranslations` hook from `next-intl` and use it to replace hardcoded strings with translation function calls. It also explains the need to add the appropriate namespace to the translation function calls and provides an example of a client component implementation. For server components, the guide explains how to import the `getTranslations` function from `next-intl/server` and use it to get translations for a specific namespace. It shows how to replace hardcoded strings with the translation function and provides an example of a server component implementation. The guide also mentions the importance of adding the English translations to the `src/i18n/messages/en.json` file and provides examples of how to structure the translations for different components. Overall, the guide provides step-by-step instructions and code snippets to help developers successfully implement application translation using `next-intl` in a Next.js TypeScript application. https://next-intl-docs.vercel.app/docs/getting-started/app-router-client-components: The page provides a guide on how to implement application translation using the `next-intl` package in a Next.js TypeScript application. It starts by explaining the file structure for translations and how to insert English translations for specific components in the `en.json` file. The page then explains the difference between client components and server components and provides examples of how to implement translations in each type of component. For server components, the `getTranslations` function from `next-intl/server` is used to retrieve translations for a specific namespace, and the translation function `t` is used to replace hardcoded strings with translated text. For client components, the `useTranslations` hook from `next-intl` is used to retrieve translations for a specific namespace, and the translation function `t` is used to replace hardcoded strings with translated text. The page also mentions the importance of adding translations for each component in the `en.json` file and provides links to the Next.js documentation for more information on internationalization in client components and server components. Overall, the page provides a step-by-step guide on how to implement application translation using `next-intl` in a Next.js TypeScript application, including code snippets and examples.

---

Step 2: ⌨️ Coding

• [X] src/components/landing/hero/hero.tsx ✅ Commit b0b7815

  Modify src/components/landing/hero/hero.tsx with contents:
  • Import the `useTranslations` hook from `next-intl` at the top of the file.
  • Use the `useTranslations` hook to get translations for the `hero` namespace. Assign the returned translation function to a variable, e.g., `const t = useTranslations("hero")`.
  • Replace all hardcoded text strings in the component with calls to the translation function `t`, passing the appropriate key as an argument. For example, replace `"AI-Driven Micro-SaaS for"` with `{t("aiDrivenMicroSaas")}`.
  • Add the English translations for all the keys used in the `hero` namespace to the `src/i18n/messages/en.json` file.

• [X] src/components/landing/partners/technologies.tsx ✅ Commit 76098a0

  Modify src/components/landing/partners/technologies.tsx with contents:
  • Import the `useTranslations` hook from `next-intl` at the top of the file.
  • Use the `useTranslations` hook to get translations for the `technologies` namespace. Assign the returned translation function to a variable, e.g., `const t = useTranslations("technologies")`.
  • Replace all hardcoded text strings in the component with calls to the translation function `t`, passing the appropriate key as an argument. For example, replace `"This project was built using the following technologies"` with `{t("builtUsingTechnologies")}`.
  • Add the English translations for all the keys used in the `technologies` namespace to the `src/i18n/messages/en.json` file.

• [X] src/components/landing/testimonials/testimonial-highlight.tsx ✅ Commit de648bf

  Modify src/components/landing/testimonials/testimonial-highlight.tsx with contents:
  • Import the `useTranslations` hook from `next-intl` at the top of the file.
  • Use the `useTranslations` hook to get translations for the `testimonialHighlight` namespace. Assign the returned translation function to a variable, e.g., `const t = useTranslations("testimonialHighlight")`.
  • Replace all hardcoded text strings in the component with calls to the translation function `t`, passing the appropriate key as an argument. For example, replace `"What people are saying"` with `{t("peopleSaying")}`.
  • Add the English translations for all the keys used in the `testimonialHighlight` namespace to the `src/i18n/messages/en.json` file.

• [X] src/components/landing/features/column/feature-sections.tsx ✅ Commit 95af774

  Modify src/components/landing/features/column/feature-sections.tsx with contents:
  • Import the `useTranslations` hook from `next-intl` at the top of the file.
  • Use the `useTranslations` hook to get translations for the `featureSections` namespace. Assign the returned translation function to a variable, e.g., `const t = useTranslations("featureSections")`.
  • Replace all hardcoded text strings in the component with calls to the translation function `t`, passing the appropriate key as an argument. For example, replace `"AI Feature 1"` with `{t("aiFeature1")}`.
  • Add the English translations for all the keys used in the `featureSections` namespace to the `src/i18n/messages/en.json` file.

---

Step 3: 🔁 Code Review

Here are my self-reviews of my changes at sweep/application-translation.

Here is the 1st review

Thank you for your work on this pull request. The changes in `src/components/landing/features/column/feature-sections.tsx` and `src/components/landing/partners/technologies.tsx` are correct and in line with the issue requirements. However, there are a few areas that need to be addressed: - In `src/components/landing/hero/hero.tsx`, the `useTranslations` hook from `next-intl` is imported correctly, but the hardcoded text strings in the component are not replaced with calls to the translation function `t`. Please replace all hardcoded text strings in this component with calls to `t`, passing the appropriate key as an argument. - Similarly, in `src/components/landing/testimonials/testimonial-highlight.tsx`, the `useTranslations` hook is imported correctly, but the hardcoded text strings in the component are not replaced with calls to the translation function `t`. Please replace all hardcoded text strings in this component with calls to `t`, passing the appropriate key as an argument. - Lastly, please add the English translations for all the keys used in the `hero`, `technologies`, `testimonialHighlight`, and `featureSections` namespaces to the `src/i18n/messages/en.json` file. The changes in this file are not provided in the diff. Please make these changes and update the pull request. If you have any questions, feel free to ask.

I finished incorporating these changes.

---

🎉 Latest improvements to Sweep:

• Sweep can now passively improve your repository! Check out Rules to learn more.

---

💡 To recreate the pull request edit the issue title or description. To tweak the pull request, leave a comment on the pull request. ^{Join Our Discord}