Setup

Introduction

This is a more in depth tutorial guide on how to set up a very simple NextJS Project using gt-next. We will take you from start to finish, including setting up the project then translating it. Over the course of this tutorial we will build our way up from simple to more advanced concepts. This tutorial assumes you have a general understanding of Typescript, Next.js, and React.

Here is a list of items that we will cover in this tutorial:

Setting up a new Next.js project
Using the <T> component to translate an app
Using variable components like <Var>, <Currency>, <DateTime>, and <Num> to translate dynamic content
Using branch components like <Plural>, and <Branch> to translate conditional content
Using i18n routing in your app

Our app will be a simple app that will allow us to check the conversion rate between currencies. We will only use inline styling and only the gt-next library to keep things as bare-bones as possible. This example was built based off of the Currency Converter tutorial on GeeksforGeeks.

Set Up Your Next App

First, let's create a new NextJS app. You can do this by running the following command:

npx create-next-app@latest

This will take you to the set up wizard, where you can choose the name of your app and the template you want to use. For this tutorial, use the name currencies and select Yes when asked if you want to use TypeScript.

Navigate to the project directory, and let's start the app!

cd currencies
npm install
npm run dev

This will start the app on http://localhost:3000.

Let's Add Some Content!

Now that we have our app set up, let's overwrite the content of our app to display a simple currency converter. Just copy and paste the following code into the src/app/page.tsx file and src/app/layout.tsx files.

Don't worry too much about how it works for now. All this code does is simulate a fetch to a currency exchange API and displays the exchange rate between two currencies.

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

Now you have a normal NextJS app set up and ready to be translated using gt-next.

Setup

Introduction

Set Up Your Next App

Let's Add Some Content!

Conclusion

On this page