+ {guestbook.map((elt) => (
+
+
+
+
+ ))}
+
+ Database powered by{' '}
+
+ Turso
+
+
+ 
-π Boilerplate and Starter for Next.js with App Router and Page Router support, Tailwind CSS and TypeScript β‘οΈ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest, Testing Library, Commitlint, VSCode, Netlify, PostCSS, Tailwind CSS, Authentication with [Clerk](https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate).
+π Boilerplate and Starter for Next.js with App Router and Page Router support, Tailwind CSS and TypeScript β‘οΈ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest, Testing Library, Commitlint, VSCode, Netlify, PostCSS, Tailwind CSS, Authentication with [Clerk](https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate), Database with DrizzleORM (SQLite, PostgreSQL, and MySQL) and [Turso](https://turso.tech/?utm_source=nextjsstarterbp)
Clone this project and use it to create your own [Next.js](https://nextjs.org) project. You can check a [Next js templates demo](https://creativedesignsguru.com/demo/Nextjs-Boilerplate/).
@@ -49,6 +49,12 @@ Developer experience first:
- π₯ Type checking [TypeScript](https://www.typescriptlang.org)
- π Integrate with [Tailwind CSS](https://tailwindcss.com)
- β
Strict Mode for TypeScript and React 18
+- π Authentication with [Clerk](https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate): Sign up, Sign in, Sign out, Forgot password, Reset password, and more.
+- π¦ Type-safe ORM with DrizzleORM, compatible with SQLite, PostgreSQL, and MySQL
+- π½ Global Database with [Turso](https://turso.tech/?utm_source=nextjsstarterbp)
+- β»οΈ Type-safe environment variables with T3 Env
+- β¨οΈ Form with React Hook From
+- π΄ Validation library with Zod
- π Linter with [ESLint](https://eslint.org) (default NextJS, NextJS Core Web Vitals, Tailwind CSS and Airbnb configuration)
- π Code Formatter with [Prettier](https://prettier.io)
- π¦ Husky for Git Hooks
@@ -62,10 +68,10 @@ Developer experience first:
- π Automatic changelog generation with Semantic Release
- π Visual testing with Percy (Optional)
- π‘ Absolute Imports using `@` prefix
-- π Authentication with [Clerk](https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate): Sign up, Sign in, Sign out, Forgot password, Reset password, and more.
- π VSCode configuration: Debug, Settings, Tasks and extension for PostCSS, ESLint, Prettier, TypeScript, Jest
- π€ SEO metadata, JSON-LD and Open Graph tags with Next SEO
- πΊοΈ Sitemap.xml and robots.txt with next-sitemap
+- β Database exploration with Drizzle Studio and CLI migration tool with Drizzle Kit
- βοΈ [Bundler Analyzer](https://www.npmjs.com/package/@next/bundle-analyzer)
- π±οΈ One click deployment with Vercel or Netlify (or manual deployment to any hosting services)
- π Include a FREE minimalist theme
@@ -109,7 +115,7 @@ Open http://localhost:3000 with your favorite browser to see your project.
### Set up authentication
-Create a Clerk account at [Clerk.com](https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate) and create a new application in Clerk Dashboard. Then, copy `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` and `CLERK_SECRET_KEY` into `.env.development.local` file:
+Create a Clerk account at [Clerk.com](https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate) and create a new application in Clerk Dashboard. Then, copy `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` and `CLERK_SECRET_KEY` into `.env.local` file (not tracked by Git):
```shell
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
@@ -118,6 +124,41 @@ CLERK_SECRET_KEY=your_clerk_secret_key
Now, you can a fully working authentication system with Next.js: Sign up, Sign in, Sign out, Forgot password, Reset password, Update profile, Update password, Update email, Delete account, and more.
+### Set up remote database
+
+The project uses DrizzleORM, a type-safe ORM compatible with SQLite, PostgreSQL, and MySQL databases. By default, the project is set up to work seamlessly with libSQL, and for production purposes, it's integrated with [Turso](https://turso.tech/?utm_source=nextjsstarterbp). The Next.js Boilerplate also enables a smooth transition to an alternative database provider if your project requires it.
+
+First, you need to create a Turso account at [Turso.tech](https://turso.tech/?utm_source=nextjsstarterbp) and install the Turso CLI:
+
+```shell
+brew install tursodatabase/tap/turso
+turso auth signup # Sign up to Turso
+```
+
+Then, create a new database:
+
+```shell
+turso db create nextjs-boilerplate
+```
+
+Now, you need to update the `DATABASE_URL` in `.env` file with the database URL provided by Turso:
+
+```shell
+turso db show nextjs-boilerplate --url
+
+# .env
+# DATABASE_URL=libsql://[RANDOM-CHARS]-[DB-NAME]-[ORG-NAME].turso.io
+```
+
+Finally, you also need to create a new environement variable `DATABASE_AUTH_TOKEN` in `.env.local` (not tracked by Git) with the auth token provided by Turso:
+
+```shell
+turso db tokens create nextjs-boilerplate
+
+# .env.local
+# DATABASE_AUTH_TOKEN=[your-auth-token]
+```
+
### Project structure
```shell
@@ -129,12 +170,16 @@ Now, you can a fully working authentication system with Next.js: Sign up, Sign i
βββ .vscode # VSCode configuration
βββ public # Public assets folder
βββ src
-β βββ layouts # Layouts components
β βββ app # Next JS Pages (app router)
+β βββ components # React components
+β βββ layouts # Layouts components
+β βββ libs # 3rd party libraries
+β βββ models # Database models
β βββ pages # Next JS Pages (page router)
β βββ pages.test # Next JS Pages tests (this avoids tests to be treated as a Next.js pages)
β βββ styles # Styles folder
β βββ templates # Default template
+β βββ validations # Validation schemas
β βββ utils # Utility functions
βββ tailwind.config.js # Tailwind CSS configuration
βββ tsconfig.json # TypeScript configuration
@@ -176,7 +221,7 @@ The generated HTML and CSS files are minified (built-in feature from Next js). I
You can create an optimized production build with:
```shell
-npm run build-prod
+npm run build
```
Now, your blog is ready to be deployed. All generated files are located at `out` folder, which you can deploy with any hosting service.
diff --git a/drizzle.config.ts b/drizzle.config.ts
new file mode 100644
index 000000000..97317ca1f
--- /dev/null
+++ b/drizzle.config.ts
@@ -0,0 +1,16 @@
+/* eslint-disable-next-line import/no-extraneous-dependencies */
+import dotenv from 'dotenv';
+import type { Config } from 'drizzle-kit';
+
+dotenv.config({
+ path: '.env',
+});
+
+export default {
+ out: './migrations',
+ schema: './src/models/schema.ts',
+ driver: 'libsql',
+ dbCredentials: {
+ url: process.env.DATABASE_URL ?? '',
+ },
+} satisfies Config;
diff --git a/jest.config.js b/jest.config.js
index 295aa44b0..756c0c50e 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -14,7 +14,7 @@ const customJestConfig = {
'^__mocks__/(.*)$': '- Shifting to the App Router introduces React features, like Server - Components and Suspense. Alongside new Next.js elements like special files - and layouts, the migration involves embracing fresh concepts, adjusting - mental models, and adapting behavior. To ease the complexity, we advise - breaking the migration into smaller steps. The app directory is - thoughtfully designed to enable incremental, page-by-page migration from - the pages directory.{' '} - - Learn more - - . -
-Developer experience first:
@@ -112,6 +113,20 @@ const Index = () => { Clerk +