Next + TypeScript Starter

A Next + TypeScript Starter featuring Tailwind CSS, Playwright, ESLint, Prettier, Axe a11y monitoring, Fathom analytics, and more!

✅ Feature Overview.

• Tailwind CSS for styling modern websites and apps.
• ESLint + Prettier setup for maintaining code quality and formatting.
• Playwright configured for cross-browser and cross-platform testing.
• useAnalytics hook for quickly enabling site analytics via Fathom.
• useAxe hook for monitoring and reporting accessibility issues within dev console.
• Custom SEO component based on Open Graph standards.
• Custom Link component for handling both internal and external links.
• Custom 404 page for invalid routes.

---

🚀 Getting Started.

1. Clone and/ or download the project locally.
2. Navigate to the projects root directory and install its dependencies: npm i
3. Open lib/metaFields in your editor and update the default meta fields. _Note: this is an important step, as these fields are referenced in the SEO component and useAnalytics hook.
4. Rename the .env.sample file to .env.local and add your Fathom site id to the NEXT_PUBLIC_FATHOM_SITE_ID environment variable. You’ll also need to add this environment variable to your project's deployment settings in Vercel (or wherever your project is hosted). Note: If you are not using Fathom analytics, you can delete the hooks/useAnalytics file and remove its invocation from _app.tsx.
5. You’re ready to code! Start your development environment npm run dev and build something awesome.
6. To update dependencies and remove existing package files, node modules, and next directory/ cache, use the npm run clean command.
7. Test are located within the tests directory and will run with the npm run test command. Results will be logged by default. To view a full report, run npm run test:report after your tests have completed. To modify your testing configuration, see the playwright.config.ts file in the root directory.

---

🔗 Documentation and Resources.

• Next - React framework for production.
• TypeScript - Strongly-typed programming language that builds on JavaScript.
• Tailwind CSS - a utility-first CSS framework.
• Microsoft Playwright - Fast and reliable end-to-end testing for modern apps.
• ESLint - Code analysis tool monitoring code and maintaining quality.
• Prettier - Opinionated code formatter.
• Axe-Core - Accessibility testing library.
• Next-Sitemap - Sitemap generator for Next.
• Fathom - Privacy first analytics.

---

🙇‍♂️ Credits.

• Scott Moss for their amazing eslint config that I modified for this starter.

---

⭐️ Contributions.

Thanks for your interest in this project! Pull Requests are welcome for any level of improvement, from small typos to pesky bugs, let’s make this project better. More information can be found in the CONTRIBUTING.md file.