This is a starter template for building modern web applications using Next.js, Hono.js, Auth.js, TanStack Query, and Drizzle ORM. The project is structured to offer authentication, server-side data management, and type-safe database queries out of the box. I named this stack the "HAND" Stack which stands for (Hono.js, Auth.js, Next.js, Drizzle ORM)
- Next.js Framework: Provides server-side rendering, static site generation, and routing capabilities.
- Hono.js for Server APIs: Ultra-lightweight web framework to create fast and flexible backend APIs.
- Auth.js Integration: Pre-configured user authentication and session management with Auth.js.
- TanStack Query for Data Fetching: Efficient and powerful data-fetching library for managing server state.
- Drizzle ORM: A TypeScript-first ORM for type-safe and scalable database queries.
- Environment Variables: Pre-configured
.env
setup for sensitive information such as database URLs and secret keys.
- Next.js: A React framework for building full-stack web applications with ease.
- Hono.js: A lightweight, performant framework for building server-side applications and APIs.
- Auth.js: Authentication library for handling sign-up, login, and session management.
- TanStack Query: Data-fetching and server-state management library.
- Drizzle ORM: Type-safe ORM with full TypeScript support for interacting with SQL databases.
To get a local copy of this project up and running, follow these steps.
- Node.js (v16.x or higher)
- npm or yarn as your package manager
- PostgreSQL (or another supported SQL database)
-
Clone the repository:
git clone https://github.com/mo-hassann/next-hono-starter.git cd next-hono-starter
-
Install dependencies:
Using npm:
npm install
Or using yarn:
yarn install
-
Set up environment variables:
Create a
.env
file in the root directory and add the following variables:DATABASE_URL=your_database_url DATABASE_SECRET=your_database_secret DRIZZLE_DATABASE_URL=your_database_url_for_drizzle AUTH_SECRET=any_random_secret NEXT_PUBLIC_APP_URL=http://localhost:3000
-
Run database migrations:
Run Drizzle ORM migrations to initialize the database:
npm run migrate
-
Start the development server:
Using npm:
npm run dev
Or using yarn:
yarn dev
Open http://localhost:3000 to view the app in your browser.
- Development mode:
npm run dev
oryarn dev
- Production mode:
npm run build && npm start
oryarn build && yarn start
Hono.js serves as the API layer. The routes for backend APIs can be found in the api/
directory, and they are fully integrated with Next.js for API routing.
Auth.js is set up to handle authentication and session management. You can configure the authentication provider and customize it further by modifying the auth.js
configuration files.
- Database Schema: Modify the Drizzle ORM schema in the
db/schema.ts
file to define your own tables and relationships. - API Routes: Add or modify API endpoints in the
api/
folder to create custom server-side logic using Hono.js. - Frontend Components: Update the frontend components in the
components/
andpages/
directories to customize the user interface.
We welcome contributions to this starter project. To contribute:
- Fork the repository.
- Create a new branch (
git checkout -b feature/your-feature-name
). - Make your changes and commit them (
git commit -m 'Add some feature'
). - Push to the branch (
git push origin feature/your-feature-name
). - Open a pull request.
Please make sure to follow the coding guidelines and update tests as appropriate.
This project is licensed under the MIT License. See the LICENSE file for more information.