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
- Implement Your Tool: Add the core functionality of your tool within the
src
directory. - Translate Content: Update translations for various languages in the
messages
directory. Use VSCode i18n Ally for efficient translation. - Optimize for SEO: Modify SEO-related content (meta descriptions, titles) for each language to improve search engine rankings.
- Customize the UI: Use NextUI components to customize the look and feel of your website.
- Deploy Your Site: Deploy your application to a hosting provider like Vercel, Netlify, or AWS.
đ i18n Setup
- Add New Languages: Create new language files within the
messages
directory. Follow the existing file structure. - Use VSCode i18n Ally: Install and configure the VSCode i18n Ally extension for quick and easy translations directly within your IDE.
- Update Language Switcher: Modify the language switcher in the navigation to include the newly added languages.
đ License
đ¤ Contributing
- Fork the repository
- Create your feature branch (
git checkout -b feature/your-feature
) - Commit your changes (
git commit -m 'Add some feature'
) - Push to the branch (
git push origin feature/your-feature
) - Create a new Pull Request