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.

✨ 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

MIT License

🤝 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