12 |
13 | 6 | An open source Next.js starter with step-by-step instructions if required. 7 |
8 | 9 |
10 |
11 |
16 | Features · 17 | Step by Step · 18 | Roadmap · 19 | Author · 20 | Credits 21 |
22 | 23 | Onset is a Next.js starter that comes with step-by-step instructions to understand how everything works, easy for both beginners and experts alike and giving you the confidence to customize it to your needs. Built with Next.js 14, Drizzle (Postgres), NextAuth/Auth.js. 24 | 25 | 26 | 27 | 28 | ## Features 29 | 30 | ### Frameworks 31 | 32 | - [Next.js](https://nextjs.org/) – React framework for building performant apps with the best developer experience 33 | - [Auth.js](https://authjs.dev/) – Handle user authentication with ease with providers like Google, Twitter, GitHub, etc. 34 | - [Drizzle](https://orm.drizzle.team/) – Typescript-first ORM for Node.js 35 | 36 | ### Platforms 37 | 38 | - [Vercel](https://vercel.com/) – Easily preview & deploy changes with git 39 | - [Neon](https://neon.tech/) – The fully managed serverless Postgres with a generous free tier 40 | 41 | ## Automatic Setup 42 | 43 | ### Installation 44 | 45 | Clone & create this repo locally with the following command: 46 | 47 | > Note: You can use `npx` or `pnpx` as well 48 | 49 | ```bash 50 | bunx create-next-app onset-starter --example "https://github.com/nrjdalal/onset" 51 | ``` 52 | 53 | 1. Install dependencies using pnpm: 54 | 55 | ```sh 56 | bun install 57 | ``` 58 | 59 | 2. Copy `.env.example` to `.env.local` and update the variables. 60 | 61 | ```sh 62 | cp .env.example .env.local 63 | ``` 64 | 65 | 3. Run the database migrations: 66 | 67 | ```sh 68 | bun db:push 69 | ``` 70 | 71 | 3. Start the development server: 72 | 73 | ```sh 74 | bun dev 75 | ``` 76 | 77 | ## Step by Step 78 | 79 | > Hint: Using `bun` instead of `npm`/`pnpm` and `bunx` instead of `npx`/`pnpx`. You can use the latter if you want. 80 | 81 | ### Phase 1 (Initialization) 82 | 83 | #### 1. Initialize the project 84 | 85 | Refs: 86 | 87 | - [Installation](https://nextjs.org/docs/getting-started/installation) 88 | 89 | ```sh 90 | bunx create-next-app . --ts --eslint --tailwind --src-dir --app --import-alias "@/*" 91 | ``` 92 | 93 | #### 2. Install `prettier` and supporting plugins 94 | 95 | Refs: 96 | 97 | - [prettier-plugin-sort-imports](https://github.com/IanVS/prettier-plugin-sort-imports) 98 | - [prettier](https://prettier.io/) 99 | - [prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) 100 | 101 | ```sh 102 | bun add -D @ianvs/prettier-plugin-sort-imports prettier prettier-plugin-tailwindcss 103 | ``` 104 | 105 | #### 3. Create `prettier.config.js` 106 | 107 | ```js 108 | /** @type {import('prettier').Config} */ 109 | module.exports = { 110 | semi: false, 111 | singleQuote: true, 112 | plugins: [ 113 | '@ianvs/prettier-plugin-sort-imports', 114 | 'prettier-plugin-tailwindcss', 115 | ], 116 | } 117 | ``` 118 | 119 | #### 4. Create `src/lib/fonts.ts` 120 | 121 | Refs: 122 | 123 | - [Font Optimization](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) 124 | 125 | ```ts 126 | import { 127 | JetBrains_Mono as FontMono, 128 | DM_Sans as FontSans, 129 | } from 'next/font/google' 130 | 131 | export const fontMono = FontMono({ 132 | subsets: ['latin'], 133 | variable: '--font-mono', 134 | }) 135 | 136 | export const fontSans = FontSans({ 137 | subsets: ['latin'], 138 | variable: '--font-sans', 139 | }) 140 | ``` 141 | 142 | #### 5. Install `clsx`, `tailwind-merge` and `nanoid` 143 | 144 | Refs: 145 | 146 | - [clsx](https://github.com/lukeed/clsx) 147 | - [tailwind-merge](https://github.com/dcastil/tailwind-merge) 148 | 149 | ```sh 150 | bun add clsx tailwind-merge nanoid 151 | ``` 152 | 153 | #### 6. Create `src/lib/utils.ts` 154 | 155 | ```ts 156 | import { clsx, type ClassValue } from 'clsx' 157 | import { customAlphabet } from 'nanoid' 158 | import { twMerge } from 'tailwind-merge' 159 | 160 | export const cn = (...inputs: ClassValue[]) => { 161 | return twMerge(clsx(inputs)) 162 | } 163 | 164 | export function generateId( 165 | { 166 | chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ', 167 | length = 12, 168 | }: { 169 | chars: string 170 | length: number 171 | } = { 172 | chars: '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ', 173 | length: 12, 174 | }, 175 | ) { 176 | const nanoid = customAlphabet(chars, length) 177 | return nanoid() 178 | } 179 | ``` 180 | 181 | #### 7. Update `src/app/layout.tsx` 182 | 183 | ```ts 184 | import './globals.css' 185 | import { fontMono, fontSans } from '@/lib/fonts' 186 | import { cn } from '@/lib/utils' 187 | import type { Metadata } from 'next' 188 | 189 | export const metadata: Metadata = { 190 | title: 'Onset', 191 | description: 'The only Next.js starter you need', 192 | } 193 | 194 | export default function RootLayout({ 195 | children, 196 | }: { 197 | children: React.ReactNode 198 | }) { 199 | return ( 200 | 201 | 208 | {children} 209 | 210 | 211 | ) 212 | } 213 | ``` 214 | 215 | ### Phase 2 (Database) 216 | 217 | #### 1. Install `drizzle` and supporting packages 218 | 219 | Refs: 220 | 221 | - [Drizzle Postgres](https://orm.drizzle.team/docs/quick-postgresql/postgresjs) 222 | 223 | ```sh 224 | bun add drizzle-orm postgres 225 | bun add -D drizzle-kit 226 | ``` 227 | 228 | #### 2. Create `src/lib/database.ts` 229 | 230 | Refs: 231 | 232 | - [Drizzle NextAuth Schema](https://authjs.dev/getting-started/adapters/drizzle) 233 | 234 | ```ts 235 | import { 236 | integer, 237 | pgTable, 238 | primaryKey, 239 | text, 240 | timestamp, 241 | } from 'drizzle-orm/pg-core' 242 | import { drizzle, PostgresJsDatabase } from 'drizzle-orm/postgres-js' 243 | import postgres from 'postgres' 244 | 245 | const queryClient = postgres(process.env.POSTGRES_URL as string) 246 | export const db: PostgresJsDatabase = drizzle(queryClient) 247 | 248 | export const users = pgTable('user', { 249 | id: text('id') 250 | .primaryKey() 251 | .$defaultFn(() => crypto.randomUUID()), 252 | publicId: text('publicId').unique().notNull(), 253 | name: text('name'), 254 | email: text('email').notNull(), 255 | emailVerified: timestamp('emailVerified', { mode: 'date' }), 256 | image: text('image'), 257 | }) 258 | 259 | export const accounts = pgTable( 260 | 'account', 261 | { 262 | userId: text('userId') 263 | .notNull() 264 | .references(() => users.id, { onDelete: 'cascade' }), 265 | type: text('type').notNull(), 266 | provider: text('provider').notNull(), 267 | providerAccountId: text('providerAccountId').notNull(), 268 | refresh_token: text('refresh_token'), 269 | access_token: text('access_token'), 270 | expires_at: integer('expires_at'), 271 | token_type: text('token_type'), 272 | scope: text('scope'), 273 | id_token: text('id_token'), 274 | session_state: text('session_state'), 275 | }, 276 | (account) => ({ 277 | compoundKey: primaryKey({ 278 | columns: [account.provider, account.providerAccountId], 279 | }), 280 | }), 281 | ) 282 | 283 | export const sessions = pgTable('session', { 284 | id: text('id').notNull(), 285 | sessionToken: text('sessionToken').primaryKey(), 286 | userId: text('userId') 287 | .notNull() 288 | .references(() => users.id, { onDelete: 'cascade' }), 289 | expires: timestamp('expires', { mode: 'date' }).notNull(), 290 | }) 291 | 292 | export const verificationTokens = pgTable( 293 | 'verificationToken', 294 | { 295 | identifier: text('identifier').notNull(), 296 | token: text('token').notNull(), 297 | expires: timestamp('expires', { mode: 'date' }).notNull(), 298 | }, 299 | (vt) => ({ 300 | compoundKey: primaryKey({ columns: [vt.identifier, vt.token] }), 301 | }), 302 | ) 303 | ``` 304 | 305 | #### 3. Create `drizzle.config.ts` 306 | 307 | ```ts 308 | import type { Config } from 'drizzle-kit' 309 | 310 | export default { 311 | schema: './src/lib/database.ts', 312 | dialect: 'postgresql', 313 | dbCredentials: { 314 | url: process.env.POSTGRES_URL as string, 315 | }, 316 | } satisfies Config 317 | ``` 318 | 319 | #### 4. Copy `.env.local.example` to `.env.local` 320 | 321 | > Hint: You can use [`pglaunch`](https://github.com/nrjdalal/pglaunch) to generate a postgres url 322 | 323 | ```env 324 | POSTGRES_URL="**********" 325 | ``` 326 | 327 | #### 5. Update `package.json` 328 | 329 | ```json 330 | { 331 | // ... 332 | "scripts": { 333 | // ... 334 | "db:push": "bun --env-file=.env.local drizzle-kit push", 335 | "db:studio": "bun --env-file=.env.local drizzle-kit studio" 336 | } 337 | // ... 338 | } 339 | ``` 340 | 341 | ##### 6. Run `db:push` to create tables 342 | 343 | ```sh 344 | bun db:push 345 | ``` 346 | 347 | ### Phase 3 (Authentication) 348 | 349 | #### 1. Install `next-auth` 350 | 351 | ```sh 352 | bun add next-auth@beta @auth/drizzle-adapter 353 | ``` 354 | 355 | #### 2. Update `.env.local` 356 | 357 | ```env 358 | # ... 359 | AUTH_SECRET="**********" 360 | 361 | AUTH_GITHUB_ID="**********" 362 | AUTH_GITHUB_SECRET="**********" 363 | ``` 364 | 365 | 3. Create `src/lib/auth.ts` 366 | 367 | ```ts 368 | import { db, users } from '@/lib/database' 369 | import { generateId } from '@/lib/utils' 370 | import { DrizzleAdapter } from '@auth/drizzle-adapter' 371 | import { eq } from 'drizzle-orm' 372 | import NextAuth from 'next-auth' 373 | import GitHub from 'next-auth/providers/github' 374 | 375 | export const { handlers, signIn, signOut, auth } = NextAuth({ 376 | adapter: { 377 | ...DrizzleAdapter(db), 378 | async createUser(user) { 379 | return await db 380 | .insert(users) 381 | .values({ 382 | ...user, 383 | publicId: generateId(), 384 | }) 385 | .returning() 386 | .then((res) => res[0]) 387 | }, 388 | }, 389 | providers: [GitHub], 390 | session: { 391 | strategy: 'jwt', 392 | }, 393 | callbacks: { 394 | async session({ session, token }) { 395 | if (token) { 396 | session.user.id = token.id as string 397 | session.user.publicId = token.publicId as string 398 | session.user.name = token.name as string 399 | session.user.email = token.email as string 400 | session.user.image = token.image as string 401 | } 402 | 403 | return session 404 | }, 405 | 406 | async jwt({ token, user }) { 407 | const [result] = await db 408 | .select() 409 | .from(users) 410 | .where(eq(users.email, token.email as string)) 411 | .limit(1) 412 | 413 | if (!result) { 414 | if (user) { 415 | token.id = user.id 416 | } 417 | 418 | return token 419 | } 420 | 421 | return { 422 | id: result.id, 423 | publicId: result.publicId, 424 | name: result.name, 425 | email: result.email, 426 | image: result.image, 427 | } 428 | }, 429 | }, 430 | }) 431 | 432 | declare module 'next-auth' { 433 | interface Session { 434 | user: { 435 | id: string 436 | publicId: string 437 | name: string 438 | email: string 439 | image: string 440 | } 441 | } 442 | } 443 | ``` 444 | 445 | #### 3. Create `src/app/api/auth/[...nextauth]/route.ts` 446 | 447 | ```ts 448 | import { handlers } from '@/lib/auth' 449 | 450 | export const { GET, POST } = handlers 451 | ``` 452 | 453 | #### 4. Create `src/middleware.ts` - not supported yet 454 | 455 | ```ts 456 | import { getToken } from 'next-auth/jwt' 457 | import { withAuth } from 'next-auth/middleware' 458 | import { NextResponse } from 'next/server' 459 | 460 | export default withAuth( 461 | async function middleware(req) { 462 | const token = await getToken({ req }) 463 | 464 | const isAuth = !!token 465 | const isAuthPage = req.nextUrl.pathname.startsWith('/access') 466 | 467 | if (isAuthPage) { 468 | if (isAuth) { 469 | return NextResponse.redirect(new URL('/dashboard', req.url)) 470 | } 471 | 472 | return null 473 | } 474 | 475 | if (!isAuth) { 476 | let from = req.nextUrl.pathname 477 | if (req.nextUrl.search) { 478 | from += req.nextUrl.search 479 | } 480 | 481 | return NextResponse.redirect( 482 | new URL(`/access?from=${encodeURIComponent(from)}`, req.url), 483 | ) 484 | } 485 | }, 486 | { 487 | callbacks: { 488 | async authorized() { 489 | return true 490 | }, 491 | }, 492 | }, 493 | ) 494 | 495 | export const config = { 496 | matcher: ['/access', '/dashboard/:path*'], 497 | } 498 | ``` 499 | 500 | #### 5. Create `src/app/(auth)/access/page.tsx` 501 | 502 | ```tsx 503 | import { auth, signIn } from '@/lib/auth' 504 | import { redirect } from 'next/navigation' 505 | 506 | const Page = async () => { 507 | const session = await auth() 508 | if (session) return redirect('/dashboard') 509 | 510 | return ( 511 |544 | {key}: {value} 545 |
546 | ))} 547 |Easily manage your account
15 |{session.user.publicId}
21 |22 | Please use this as reference ID when contacting support 23 |
24 |{session.user.name}
30 |{session.user.email}
38 |9 | Welcome back! Here's a quick overview of your account! 10 |
11 |21 | Onset is a Next.js starter that comes with step-by-step instructions 22 | to understand how everything works, easy for both beginners and 23 | experts alike and giving you the confidence to customize it to your 24 | needs. Built with Next.js 14, Drizzle (Postgres), NextAuth/Auth.js. 25 |
26 |
51 | Onset is open source and powered by open source software.
The
52 | code is available on{' '}
53 |
59 | GitHub
60 |
61 | .{' '}
62 |
ACME
50 | 51 | ) 52 | } 53 | -------------------------------------------------------------------------------- /src/components/sidebar.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import Darkmode from '@/components/darkmode' 4 | import { Logo } from '@/components/navbar' 5 | import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet' 6 | import { SyncUser } from '@/lib/react-query' 7 | import { cn } from '@/lib/utils' 8 | import { 9 | HamburgerMenuIcon, 10 | PlusIcon, 11 | StitchesLogoIcon, 12 | } from '@radix-ui/react-icons' 13 | import Link from 'next/link' 14 | import { usePathname } from 'next/navigation' 15 | import { useState } from 'react' 16 | 17 | const data = [ 18 | { 19 | title: 'Dashboard', 20 | href: '/dashboard', 21 | }, 22 | { 23 | title: 'Account', 24 | href: '/account', 25 | }, 26 | ] as { 27 | title: string 28 | href: string 29 | devOnly?: boolean 30 | }[] 31 | 32 | export const MobileSidebar = () => { 33 | const pathname = usePathname() 34 | 35 | const [open, setOpen] = useState(false) 36 | 37 | return ( 38 |