Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/huahuai23/laf-homepage
基于 Next.js 和 TypeScript 的模板项目，集成了 App Router、国际化（i18n）、Prettier、ESLint、Tailwind CSS 和 Chakra UI。特点包括 VSCode 集成、服务端/客户端国际化支持，以及优化的开发体验。非常适合使用强大的工具链和 UI 框架构建现代、可扩展的 Web 应用程序。
https://github.com/huahuai23/laf-homepage
i18n-react nextjs react template-project
Last synced: 30 days ago
JSON representation
基于 Next.js 和 TypeScript 的模板项目，集成了 App Router、国际化（i18n）、Prettier、ESLint、Tailwind CSS 和 Chakra UI。特点包括 VSCode 集成、服务端/客户端国际化支持，以及优化的开发体验。非常适合使用强大的工具链和 UI 框架构建现代、可扩展的 Web 应用程序。
- Host: GitHub
- URL: https://github.com/huahuai23/laf-homepage
- Owner: HUAHUAI23
- Created: 2024-08-03T14:23:13.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-20T08:56:40.000Z (4 months ago)
- Last Synced: 2024-10-14T15:57:08.486Z (2 months ago)
- Topics: i18n-react, nextjs, react, template-project
- Language: TypeScript
- Homepage:
- Size: 6.77 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-EN.md
Awesome Lists containing this project
README
# Next.js TypeScript Project Template
[**中文**](./README.md)
This is a template project based on [Next.js](https://nextjs.org/) and TypeScript, integrating internationalization (i18n), code formatting, lint checking, and using Tailwind CSS and Chakra UI as UI frameworks.
## Features
- **Next.js App Router**: Using Next.js 13+ App Router structure.
- **TypeScript**: Full TypeScript support.
- **Internationalization (i18n)**: Support for internationalization in both server-side and client-side components.
- **Code Formatting**: Using Prettier for code formatting, compatible with ESLint syntax checking.
- **Linting & Compile**: Using ESLint for code quality checking, and tsconfig for syntax checking rules.
- **UI Frameworks**: Integration of Tailwind CSS and Chakra UI.
- **VSCode Integration**: Optimized VSCode development experience, automatically fixing import order during formatting (simple-import-sort), i18n Ally plugin for convenient translation display.
## Quick Start
1. Clone the repository:
`git clone https://github.com/HUAHUAI23/laf-homepage.git`
2. Install dependencies:
```sh
cd laf-homepage
pnpm install
```
3. Run the development server:
`pnpm dev`
4. Open [http://localhost:3000](http://localhost:3000) in your browser.
## Internationalization (i18n)
This project uses i18next for internationalization. It supports translation functionality in both server-side and client-side components.
Refer to next-app-dir-i18next-example-ts for configuration.
Usage example:
```typescript
// Server-side component
import { useTranslation } from '@/app/i18n';
export default async function ServerComponent({ params: { lng } }) {
const { t } = await useTranslation(lng,'common');
return
{t('title')}
;
}
// Client-side component
'use client';
import { useTranslation } from '@/app/i18n/client';
export default function ClientComponent({ lng }) {
const { t } = await useTranslation(lng,'common');
return {t('button.label')};
}
```
## Code Formatting and Linting
- Using Prettier for code formatting.
- Using ESLint for code quality checking.
- Configuration files: .prettierrc and .eslintrc.json.
## Run lint checks
`pnpm lint`
`pnpm lint:next`
`pnpm lint:fix`
## VSCode Integration
- Auto-formatting: Automatically format code on save.
- Import sorting: Use simple-import-sort plugin to automatically sort import statements.
- i18n hints: Use i18n Ally plugin to provide translation hints.
## Recommended VSCode plugins
- ESLint
- Prettier
- Tailwind CSS IntelliSense
- i18n Ally
## UI Frameworks
- Tailwind CSS: For quickly building custom designs.
- Chakra UI: Providing accessible React components.
## Script Commands
- `pnpm dev`: Run development server
- `pnpm build`: Build production version
- `pnpm lint:next`: Run next lint check
- `pnpm lint`: Run eslint lint check
- `pnpm lint:fix`: Run eslint lint check and fix
- `docker build -t my-nextjs-app .`: Build docker image
- `...` See scripts configuration in package.json for more details