Configuration

Introduction

Ceci est un guide de tutoriel plus approfondi sur la façon de configurer un projet NextJS très simple en utilisant gt-next. Nous vous accompagnerons du début à la fin, y compris la configuration du projet puis sa traduction. Au cours de ce tutoriel, nous passerons de concepts simples à plus avancés. Ce tutoriel suppose que vous avez une compréhension générale de Typescript, Next.js et React.

Voici une liste des éléments que nous couvrirons dans ce tutoriel :

Configuration d'un nouveau projet Next.js
Utilisation du composant <T> pour traduire une application
Utilisation de composants variables comme <Var>, <Currency>, <DateTime>, et <Num> pour traduire du contenu dynamique
Utilisation de composants de branche comme <Plural>, et <Branch> pour traduire du contenu conditionnel
Utilisation du routage i18n dans votre application

Notre application sera une application simple qui nous permettra de vérifier le taux de conversion entre les devises. Nous n'utiliserons que le style en ligne et uniquement la bibliothèque gt-next pour garder les choses aussi simples que possible. Cet exemple a été construit sur la base du tutoriel Currency Converter sur GeeksforGeeks.

Configurez Votre Application Next

Tout d'abord, créons une nouvelle application NextJS. Vous pouvez le faire en exécutant la commande suivante :

npx create-next-app@latest

Cela vous mènera à l'assistant de configuration, où vous pouvez choisir le nom de votre application et le modèle que vous souhaitez utiliser. Pour ce tutoriel, utilisez le nom currencies et sélectionnez Oui lorsqu'on vous demande si vous souhaitez utiliser TypeScript.

Naviguez vers le répertoire du projet, et démarrons l'application !

cd currencies
npm install
npm run dev

Cela démarrera l'application sur http://localhost:3000.

Ajoutons du contenu !

Maintenant que notre application est configurée, remplaçons le contenu de notre application pour afficher un simple convertisseur de devises. Il suffit de copier et coller le code suivant dans les fichiers src/app/page.tsx et src/app/layout.tsx.

Ne vous inquiétez pas trop de son fonctionnement pour l'instant. Tout ce code fait est de simuler une récupération à une API de change de devises et d'afficher le taux de change entre deux devises.

src/app/layout.tsx

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
 
const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});
 
const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});
 
export const metadata: Metadata = {
  title: "Currency Converter",
  description: "A simple currency converter",
};
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );
}

Conclusion

Vous avez maintenant une application NextJS normale configurée et prête à être traduite en utilisant gt-next.

Configuration

Introduction

Configurez Votre Application Next

Ajoutons du contenu !

Conclusion

Sur cette page