Simple Tool Template

A single-function tool website template. Focus on building your core tool while leveraging a ready-made structure with internationalization (i18n) and SEO optimization. Ideal for quickly deploying small, focused utilities.

• Site
• GitHub

✨ Features

• 🌍 Internationalization (i18n) Support: Built-in support for multiple languages using next-intl.
• 📱 Responsive Design: Works seamlessly on all devices.
• 🎨 Beautiful UI with NextUI: Modern and visually appealing user interface using the NextUI component library.
• 🚀 Fast and SEO-Friendly with Next.js: Leverages the performance and SEO benefits of the Next.js framework.
• 💻 Easy Development Workflow: Streamlined development experience for rapid iteration.
• 🔍 SEO Optimized with Multi-Language Support: Optimized for search engines with support for meta descriptions and content in multiple languages. Easily translate your tool description for broader reach.

🛠️ Tech Stack

• Next.js: React framework for production, providing server-side rendering, static site generation, and routing.
• next-intl: The internationalization (i18n) library used to manage translations and locale routing.
• NextUI: A React UI library that offers pre-built, stylish components based on Tailwind CSS.
• Tailwind CSS: A utility-first CSS framework for rapidly styling the application.
• VSCode i18n Ally: A VSCode extension for efficient one-click translation of (en/ja/ko).json files.

🚀 Quick Start

Clone the repository:

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

Install dependencies:

pnpm install

Copy environment variables:

cp .env.example .env

Run the development server:

pnpm dev

📖 How to Use

1. Implement Your Tool: Add the core functionality of your tool within the src directory.

2. Translate Content: Update translations for various languages in the messages directory. Use VSCode i18n Ally for efficient translation.

3. Optimize for SEO: Modify SEO-related content (meta descriptions, titles) for each language to improve search engine rankings.

4. Customize the UI: Use NextUI components to customize the look and feel of your website.

5. Deploy Your Site: Deploy your application to a hosting provider like Vercel, Netlify, or AWS.

📝 i18n Setup

1. Add New Languages: Create new language files within the messages directory. Follow the existing file structure.

2. Use VSCode i18n Ally: Install and configure the VSCode i18n Ally extension for quick and easy translations directly within your IDE.

3. Update Language Switcher: Modify the language switcher in the navigation to include the newly added languages.

📄 License

AGPL

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -m 'Add some feature')
4. Push to the branch (git push origin feature/your-feature)
5. Create a new Pull Request