간단한 도구 템플릿

단일 기능 도구 웹사이트 템플릿입니다. 국제화(i18n) 및 SEO 최적화가 적용된 즉시 사용 가능한 구조를 활용하면서 핵심 도구 구축에 집중하세요. 작고 집중된 유틸리티를 빠르게 배포하는 데 이상적입니다.

• Site
• GitHub

✨ 기능

• 🌍 국제화(i18n) 지원: next-intl을 사용하여 여러 언어를 기본적으로 지원합니다.
• 📱 반응형 디자인: 모든 장치에서 원활하게 작동합니다.
• 🎨 NextUI를 사용한 아름다운 UI: NextUI 컴포넌트 라이브러리를 사용하여 현대적이고 시각적으로 매력적인 사용자 인터페이스를 제공합니다.
• 🚀 Next.js를 사용한 빠르고 SEO 친화적인 웹사이트: Next.js 프레임워크의 성능 및 SEO 이점을 활용합니다.
• 💻 쉬운 개발 워크플로: 빠른 반복을 위한 간소화된 개발 경험을 제공합니다.
• 🔍 다국어 지원으로 SEO 최적화: 여러 언어로 된 메타 설명 및 콘텐츠 지원으로 검색 엔진에 최적화되어 있습니다. 도구 설명을 쉽게 번역하여 더 넓은 범위에 도달할 수 있습니다.

🛠️ 기술 스택

• Next.js: 서버 측 렌더링, 정적 사이트 생성 및 라우팅을 제공하는 프로덕션용 React 프레임워크입니다.
• next-intl: 번역 및 로케일 라우팅을 관리하는 데 사용되는 국제화(i18n) 라이브러리입니다.
• NextUI: Tailwind CSS를 기반으로 구축된 사전 구축된 세련된 컴포넌트를 제공하는 React UI 라이브러리입니다.
• Tailwind CSS: 애플리케이션 스타일을 빠르게 지정하기 위한 유틸리티 우선 CSS 프레임워크입니다.
• VSCode i18n Ally: (en/ja/ko).json 파일을 효율적으로 원클릭 번역할 수 있는 VSCode 확장 프로그램입니다.

🚀 빠른 시작

저장소 복제:

git clone https://github.com/meetqy/simple-tool-template.git

종속성 설치:

pnpm install

환경 변수 복사:

cp .env.example .env

개발 서버 실행:

pnpm dev

📖 사용 방법

1. 도구 구현: src 디렉토리 내에 도구의 핵심 기능을 추가합니다.

2. 콘텐츠 번역: messages 디렉토리에서 다양한 언어에 대한 번역을 업데이트합니다. 효율적인 번역을 위해 VSCode i18n Ally를 사용하십시오.

3. SEO 최적화: 검색 엔진 순위를 높이기 위해 각 언어에 대한 SEO 관련 콘텐츠(메타 설명, 제목)를 수정합니다.

4. UI 사용자 정의: NextUI 컴포넌트를 사용하여 웹사이트의 모양과 느낌을 사용자 정의합니다.

5. 사이트 배포: Vercel, Netlify 또는 AWS와 같은 호스팅 제공업체에 애플리케이션을 배포합니다.

📝 i18n 설정

1. 새 언어 추가: messages 디렉토리 내에 새 언어 파일을 만듭니다. 기존 파일 구조를 따르십시오.

2. VSCode i18n Ally 사용: IDE 내에서 빠르고 쉽게 번역할 수 있도록 VSCode i18n Ally 확장 프로그램을 설치하고 구성합니다.

3. 언어 전환기 업데이트: 새로 추가된 언어를 포함하도록 탐색 모음에서 언어 전환기를 수정합니다.

📄 라이선스

AGPL

🤝 기여

1. 저장소를 포크합니다.
2. 기능 브랜치를 생성합니다 (git checkout -b feature/your-feature).
3. 변경 사항을 커밋합니다 (git commit -m 'Add some feature').
4. 브랜치에 푸시합니다 (git push origin feature/your-feature).
5. 새 풀 요청을 생성합니다.