Introduction
Introducing Dirstarter, a complete Next.js boilerplate for building directory websites
What is Dirstarter?
Welcome to Dirstarter, a complete boilerplate for building directory websites. This project is designed to accelerate your development with a robust, modular, and extensible foundation. Feel free to use it as is or extend it for your own needs.
People use Dirstarter to build directory websites for a variety of reasons:
- 🚀 Fast & Modern - Built with Next.js 15 App Router and TypeScript
- 🎨 Beautiful UI - Powered by Tailwind CSS and shadcn/ui components
- 📱 Responsive - Works great on all devices
- 🔍 SEO Optimized - Built-in SEO features
Whether you're a beginner or an experienced developer, this documentation will guide you through the setup, configuration, and deployment of your directory website.
Let's get started!
This guide assumes you have some familiarity with Next.js, Tailwind CSS, and Prisma. If you don't have any of these, please refer to the Official Documentation as we will not cover the basics in this guide.
Tech Stack
Next.js 15
The React framework for building server-side rendered (SSR), static, and hybrid web applications using React. We've experimented with many different frameworks and have settled on Next.js as the best option for directory websites due to its performance, scalability, and ease of use.
Prisma
An ORM (Object-Relational Mapping) tool that helps you access your database in a type-safe way. We use Prisma to define our database schema and to generate the necessary TypeScript types for our application. It also helps us to write queries in a type-safe way and to easily migrate our database schema.
Tailwind CSS
A utility-first CSS framework packed with utility classes that can be composed to build any design, directly in your markup. We use it to create a beautiful and consistent UI design system you can use to build your directory website.
Radix UI / shadcn/ui
A collection of headless UI components that help you build accessible and composable user interfaces. Sirstarter is also compatible with the popular wrapper of Radix called shadcn/ui and enables you to generate pre-designed components with a single command.
Better Auth
A modern, secure, easy-to-use and framework agnostic authentication solution. It provides a comprehensive set of features for user authentication, including email/password, social login, and more. It can easily be extended to support more providers and features.
Scope of This Documentation
This documentation will guide you through configuring, running, and deploying the boilerplate, and will provide links to the official documentation of the underlying technologies where necessary. To fully grasp the boilerplate's capabilities, it's essential to understand these technologies, so be sure to explore their documentation as well.
For anything strictly related to the Next.js directory boilerplate, this documentation has you covered!
Official Documentation
For in-depth understanding of the underlying technologies, refer to their official documentation:
- Next.js: Next.js Documentation
- Prisma: Prisma Documentation
- Tailwind CSS: Tailwind CSS Documentation
- Radix UI: Radix UI Documentation
- shadcn/ui: shadcn/ui Documentation
- Better Auth: Better Auth Documentation
Understanding these technologies is crucial for building a successful directory website.
What's Next?
Dive into the documentation, explore the features, and start building your directory website today! 🚀
Last updated on