JueJinClient 项目教程

2024-09-20 10:41:01作者：江焘钦

1. 项目目录结构及介绍

JueJinClient 项目的目录结构如下：

JueJinClient/
├── app/
│   ├── components/
│   ├── context/
│   ├── page.tsx
│   └── layout.tsx
├── public/
├── src/
│   ├── components/
│   ├── styles/
│   └── utils/
├── .gitignore
├── package.json
├── README.md
└── tsconfig.json

目录结构介绍

app/: 存放 Next.js 应用的主要代码，包括页面组件、布局组件等。
- components/: 存放应用中的各种组件。
- context/: 存放 React Context 相关的文件。
- page.tsx: 应用的主页面文件。
- layout.tsx: 应用的布局文件。
public/: 存放静态资源文件，如图片、字体等。
src/: 存放应用的源代码。
- components/: 存放应用中的各种组件。
- styles/: 存放样式文件。
- utils/: 存放工具函数和辅助代码。
.gitignore: Git 忽略文件配置。
package.json: 项目的依赖配置文件。
README.md: 项目的说明文档。
tsconfig.json: TypeScript 配置文件。

2. 项目启动文件介绍

`app/page.tsx`

page.tsx 是 Next.js 应用的主页面文件。它定义了应用的首页内容。

import styles from './page.module.css';
import Button from '../src/components/button';

export default function Home() {
  return (
    <main className={styles.main}>
      <h1>hello world</h1>
      <Button />
    </main>
  );
}

`app/layout.tsx`

layout.tsx 是 Next.js 应用的布局文件。它定义了应用的整体布局结构。

import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import ThemeContextProvider from '../src/context/ThemeContext';

const inter = Inter({ subsets: ['latin'] });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ThemeContextProvider>{children}</ThemeContextProvider>
      </body>
    </html>
  );
}

3. 项目的配置文件介绍

`package.json`

package.json 文件定义了项目的依赖和脚本命令。

{
  "name": "JueJinClient",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "latest",
    "react": "latest",
    "react-dom": "latest"
  }
}

`tsconfig.json`

tsconfig.json 文件定义了 TypeScript 的编译配置。

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}