设置

介绍

这是一个更深入的教程指南，教您如何使用 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 获取数据，并显示两种货币之间的汇率。

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

设置

介绍

设置您的下一个应用程序

让我们添加一些内容！

结论

在本页面