セットアップ

はじめに

これは、gt-nextを使用して非常にシンプルなNextJSプロジェクトをセットアップする方法に関する、より詳細なチュートリアルガイドです。プロジェクトのセットアップから翻訳まで、最初から最後までご案内します。このチュートリアルを通じて、シンプルな概念からより高度な概念へと進んでいきます。このチュートリアルは、Typescript、Next.js、およびReactの一般的な理解を前提としています。

このチュートリアルで取り上げる項目のリストは次のとおりです：

新しいNext.jsプロジェクトのセットアップ
<T>コンポーネントを使用してアプリを翻訳する
<Var>, <Currency>, <DateTime>, <Num>のような変数コンポーネントを使用して動的コンテンツを翻訳する
<Plural>, <Branch>のようなブランチコンポーネントを使用して条件付きコンテンツを翻訳する
アプリでのi18nルーティングの使用

私たちのアプリは、通貨間の換算レートを確認できるシンプルなアプリになります。可能な限りシンプルに保つために、インラインスタイリングとgt-nextライブラリのみを使用します。この例は、GeeksforGeeksの通貨コンバーターチュートリアルに基づいて構築されました。

次のアプリをセットアップする

まず、新しいNextJSアプリを作成しましょう。次のコマンドを実行することでこれを行うことができます:

npx create-next-app@latest

これによりセットアップウィザードが起動し、アプリの名前と使用したいテンプレートを選択できます。このチュートリアルでは、名前をcurrenciesにし、TypeScriptを使用するかどうか尋ねられたらYesを選択してください。

プロジェクトディレクトリに移動し、アプリを起動しましょう！

cd currencies
npm install
npm run dev

これにより、アプリがhttp://localhost:3000で起動します。

コンテンツを追加しましょう！

アプリのセットアップが完了したので、アプリの内容を上書きしてシンプルな通貨コンバーターを表示しましょう。次のコードを src/app/page.tsx ファイルと src/app/layout.tsx ファイルにコピー＆ペーストしてください。

今はどのように動作するかをあまり心配しないでください。このコードは、通貨交換APIへのフェッチをシミュレートし、2つの通貨間の為替レートを表示するだけです。

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>
  );
}

結論

これで、通常のNextJSアプリがセットアップされ、gt-nextを使用して翻訳する準備が整いました。

セットアップ

はじめに

次のアプリをセットアップする

コンテンツを追加しましょう！

結論

このページについて