|
2 | 2 | Next.js TypeScript Starter
|
3 | 3 | </h1>
|
4 | 4 |
|
| 5 | +<p align="center"> |
| 6 | + A modern Next.js starter template with TypeScript, Tailwind CSS, and more |
| 7 | +</p> |
| 8 | + |
5 | 9 | ---
|
6 | 10 |
|
| 11 | +## Features |
| 12 | + |
| 13 | +- ⚡️ Next.js 15 with App Router |
| 14 | +- 🎨 Tailwind CSS with Typography plugin |
| 15 | +- 🔒 NextAuth.js (Auth.js) for authentication |
| 16 | +- 🗄️ Drizzle ORM with NeonDB integration |
| 17 | +- 📝 MDX support for content |
| 18 | +- 🎭 Framer Motion for animations |
| 19 | +- 🔔 Sonner for toast notifications |
| 20 | +- 🎵 use-sound for sound effects |
| 21 | +- 🎨 Akar Icons for beautiful icons |
| 22 | +- 🔍 SEO optimized(with metadata and schema.org) |
| 23 | +- 🎯 TypeScript for type safety |
| 24 | +- 🧹 ESLint + Prettier for code quality |
| 25 | +- 🐶 Husky for git pre commit |
| 26 | +- 🚀 View transitions for smooth page navigation |
| 27 | + |
| 28 | +## Project Structure |
| 29 | + |
| 30 | +``` |
| 31 | +├── app/ # Next.js app directory |
| 32 | +├── components/ # React components |
| 33 | +│ ├── atoms/ # Basic UI components |
| 34 | +│ └── ... |
| 35 | +├── hooks/ # Custom React hooks |
| 36 | +├── styles/ # Global styles |
| 37 | +├── utils/ # Utility functions |
| 38 | +├── public/ # Static assets |
| 39 | +├── assets/ # Project assets |
| 40 | +└── ... |
| 41 | +``` |
| 42 | + |
7 | 43 | ## Included
|
8 | 44 |
|
9 | 45 | - `not found page` page to handle 404 routes
|
|
14 | 50 | - `components/atoms/Button.tsx` a button component with variants
|
15 | 51 | - `hooks/useClickOutside` hook to check if user clicked outside the element
|
16 | 52 | - `hooks/useModal` hook to create modals, which can close with esc
|
| 53 | +- `hooks/useDynamicHeight` |
| 54 | +- Drizzle ORM for database(with NeonDB) |
| 55 | +- NextAuth(or Auth.js) for Auth |
17 | 56 |
|
18 | 57 | ## Additional Packages Used
|
19 | 58 |
|
|
25 | 64 | - use-sound - for using sounds
|
26 | 65 | - Class Variance Authority - for type-safely managing class names
|
27 | 66 |
|
| 67 | +## Getting Started |
| 68 | + |
| 69 | +1. Clone the repository: |
| 70 | + |
| 71 | +```bash |
| 72 | +git clone https://github.com/nirnejak/nextjs-typescript-starter.git |
| 73 | +cd nextjs-typescript-starter |
| 74 | +``` |
| 75 | + |
| 76 | +2. Install dependencies: |
| 77 | + |
| 78 | +```bash |
| 79 | +bun install |
| 80 | +``` |
| 81 | + |
| 82 | +3. Copy the environment variables: |
| 83 | + |
| 84 | +```bash |
| 85 | +cp .env.example .env |
| 86 | +``` |
| 87 | + |
| 88 | +4. Update the environment variables in `.env` with your configuration. |
| 89 | + |
| 90 | +5. Setup pre-commit hooks: |
| 91 | + |
| 92 | +```bash |
| 93 | +bun run prepare |
| 94 | +``` |
| 95 | + |
| 96 | +6. Start the development server: |
| 97 | + |
| 98 | +```bash |
| 99 | +bun run dev |
| 100 | +``` |
| 101 | + |
28 | 102 | ## Available Scripts
|
29 | 103 |
|
30 | 104 | **Install Dependencies**
|
@@ -99,4 +173,32 @@ bun run build
|
99 | 173 | bun start
|
100 | 174 | ```
|
101 | 175 |
|
| 176 | +## Configuration |
| 177 | + |
| 178 | +Update the `config.ts` file with your site's information: |
| 179 | + |
| 180 | +```typescript |
| 181 | +const config = { |
| 182 | + baseUrl: "https://your-site.com", |
| 183 | + appName: "Your App Name", |
| 184 | + appDescription: "Your app description", |
| 185 | + creator: "Your Name", |
| 186 | + authorName: "Your Name", |
| 187 | + authorUrl: "Your URL or Email", |
| 188 | + keywords: ["your", "keywords"], |
| 189 | + twitterSite: "@your-site", |
| 190 | + twitterCreator: "@your-username", |
| 191 | +} |
| 192 | +``` |
| 193 | + |
| 194 | +## Contributing |
| 195 | + |
| 196 | +Contributions are welcome! Please feel free to submit a Pull Request. |
| 197 | + |
| 198 | +## License |
| 199 | + |
| 200 | +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. |
| 201 | + |
102 | 202 | ---
|
| 203 | + |
| 204 | +Made with ❤️ by [Jitendra Nirnejak](https://github.com/nirnejak) |
0 commit comments