{"id":24623724,"url":"https://github.com/mikevpeeren/next-typescript-tailwindcss-sass-starter","last_synced_at":"2025-05-07T16:21:28.054Z","repository":{"id":36951533,"uuid":"434355640","full_name":"MikevPeeren/next-typescript-tailwindcss-sass-starter","owner":"MikevPeeren","description":"Use TypeScript, TailwindCSS \u0026 Sass to quick start your new Next.js app!!","archived":false,"fork":false,"pushed_at":"2025-04-30T19:41:31.000Z","size":2143,"stargazers_count":39,"open_issues_count":0,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-30T20:44:07.910Z","etag":null,"topics":["css","html","javascript","nextjs","nextjs-starter","nextjs-template","react","sass","starter","starter-template","tailwind","tailwind-css","tailwindcss","template","typescript","vercel","vercel-deployment"],"latest_commit_sha":null,"homepage":"https://next-typescript-tailwindcss-sass-starter.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MikevPeeren.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-12-02T19:53:04.000Z","updated_at":"2025-04-30T19:41:27.000Z","dependencies_parsed_at":"2023-10-03T16:47:07.501Z","dependency_job_id":"4e79c763-7171-4263-898a-e615230826e4","html_url":"https://github.com/MikevPeeren/next-typescript-tailwindcss-sass-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikevPeeren%2Fnext-typescript-tailwindcss-sass-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikevPeeren%2Fnext-typescript-tailwindcss-sass-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikevPeeren%2Fnext-typescript-tailwindcss-sass-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikevPeeren%2Fnext-typescript-tailwindcss-sass-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MikevPeeren","download_url":"https://codeload.github.com/MikevPeeren/next-typescript-tailwindcss-sass-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252913061,"owners_count":21824092,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","javascript","nextjs","nextjs-starter","nextjs-template","react","sass","starter","starter-template","tailwind","tailwind-css","tailwindcss","template","typescript","vercel","vercel-deployment"],"created_at":"2025-01-25T03:58:10.462Z","updated_at":"2025-05-07T16:21:28.044Z","avatar_url":"https://github.com/MikevPeeren.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js TypeScript TailwindCSS \u0026 Sass Starter\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/license/MikevPeeren/next-typescript-tailwindcss-sass-starter\" alt=\"License\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Next.js-15.2-blue\" alt=\"Next.js Version\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/React-19.1-blue\" alt=\"React Version\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/TailwindCSS-4.0-blue\" alt=\"TailwindCSS Version\" /\u003e\n\u003c/p\u003e\n\nModern, production-ready starter template for Next.js projects with TypeScript, TailwindCSS v4, and Sass. Includes essential developer tools for code quality and testing.\n\n## ✨ Features\n\nThis starter provides:\n\n- **App Router** - Next.js 15.2 with the latest App Router architecture\n- **Modern React** - Uses React 19.1 with latest features and optimizations\n- **Type Safety** - Full TypeScript integration with strict type checking\n- **Modern Styling** - TailwindCSS v4.0 with Sass support for advanced styling\n- **Testing Ready** - Vitest and React Testing Library pre-configured\n- **Code Quality** - ESLint, Prettier, Husky, and Lint-Staged for high-quality code\n- **Performance Analysis** - Bundle analyzer for optimizing your app's size\n- **Developer Experience** - Hot reloading, organized project structure\n\n## 🧰 Tech Stack\n\n- ⚡️ [Next.js 15.2](https://nextjs.org/) - React framework with App Router\n- ⚛️ [React 19.1](https://reactjs.org/) - JavaScript library for building user interfaces\n- 🧪 [Vitest 3.0](https://vitest.dev/) - Next generation testing framework\n- 🧁 [TailwindCSS v4.0](https://tailwindcss.com/) - Utility-first CSS framework\n- ✨ [TypeScript 5.8](https://www.typescriptlang.org/) - Strongly typed programming language\n- 🎉 [Sass 1.86](https://sass-lang.com/) - Professional grade CSS extension language\n- 📏 [ESLint v9.23](https://eslint.org/) - Find and fix problems in JavaScript code\n- 🦋 [Prettier 3.5](https://prettier.io/) - Opinionated code formatter\n- 🐶 [Husky 9.1](https://github.com/typicode/husky) - Git hooks to improve commits\n- 🧹 [Lint Staged 15.5](https://github.com/okonet/lint-staged) - Run linters against staged git files\n- 🔎 [@next/bundle-analyzer](https://www.npmjs.com/package/@next/bundle-analyzer) - Analyze your project bundles\n\n## ⚡️ Quick Start\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/project?template=https://github.com/MikevPeeren/next-typescript-tailwindcss-sass-starter)\n\n## 🚀 Getting Started\n\nRun the following command to create a new project with this Starter:\n\n```bash\nyarn create next-app my-app -e https://github.com/MikevPeeren/next-typescript-tailwindcss-sass-starter\n# or\nnpx create-next-app my-app -e https://github.com/MikevPeeren/next-typescript-tailwindcss-sass-starter\n```\n\nOnce the project and dependencies are finished installing, you can navigate to that directory and start up the development server with:\n\n```bash\nyarn dev\n# or\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see your new project!\n\n## 📝 Available Scripts\n\n- `yarn dev` - Starts the development server\n- `yarn build` - Builds the app for production\n- `yarn start` - Runs the built app in production mode\n- `yarn lint` - Runs ESLint for code linting\n- `yarn test` - Runs Vitest test suite\n- `yarn format` - Runs Prettier to format your code\n- `yarn prepare` - Sets up Husky pre-commit hooks\n- `yarn precommit` - Runs Lint Staged for staged files\n\n## 📋 Project Structure\n\n```\nnext-typescript-tailwindcss-sass-starter/\n├── app/                   # Next.js App Router files\n│   ├── layout.tsx         # Root layout component\n│   ├── page.tsx           # Homepage component\n├── __tests__/             # Test files\n├── styles/                # Global styles\n│   ├── globals.scss       # Global SCSS with Tailwind imports\n├── public/                # Static assets\n├── .husky/                # Husky git hooks\n```\n\n## 🧪 Testing\n\nThis starter uses Vitest and React Testing Library for testing. An example test is included in the `__tests__` directory.\n\n```bash\n# Run tests\nyarn test\n```\n\n## 💅 Styling\n\nThis starter combines TailwindCSS and Sass for a powerful styling workflow:\n\n- TailwindCSS for utility-first CSS\n- Sass for more complex styling needs\n- Organized global styles in the `styles` directory\n\n## 🛠️ Development Tools\n\n- **ESLint**: Configured with Next.js recommended rules\n- **Prettier**: Maintains consistent code style\n- **Husky**: Runs checks before commits\n- **Lint Staged**: Runs linters against staged git files\n\n## 📚 Learn More About Next.js\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## 📄 License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikevpeeren%2Fnext-typescript-tailwindcss-sass-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikevpeeren%2Fnext-typescript-tailwindcss-sass-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikevpeeren%2Fnext-typescript-tailwindcss-sass-starter/lists"}