Table of Contents
Setup the Next.js project (shadcn/ui)
bunx --bun create-next-app@latest . --typescript --tailwind --eslint
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/hoomaan/Downloads/Learning/Next.js/fuzzie-automation.
Using bun.
Initializing project with template: app-tw
Installing dependencies:
- react
- react-dom
- next
Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next
bun install v1.1.10 (5102a944)
+ @types/node@20.12.12
+ @types/react@18.3.3
+ @types/react-dom@18.3.0
+ eslint@8.57.0 (v9.3.0 available)
+ eslint-config-next@14.2.3
+ postcss@8.4.38
+ tailwindcss@3.4.3
+ typescript@5.4.5
+ next@14.2.3
+ react@18.3.1
+ react-dom@18.3.1
348 packages installed [15.88s]
Initialized a git repository.
Success! Created fuzzie-automation at /Users/hoomaan/Downloads/Learning/Next.js/fuzzie-automation
bunx --bun shadcn-ui@latest init
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Would you like to use CSS variables for colors? … no / yes
✔ Writing components.json...
✔ Initializing project...
✔ Installing dependencies...
Success! Project initialization completed. You may now add components.
bun add framer-motion clsx tailwind-merge
bun add v1.1.10 (5102a944)
installed framer-motion@11.2.6
installed clsx@2.1.1
installed tailwind-merge@2.3.0
3 packages installed [348.00ms]
bun add next-themes
bun add v1.1.10 (5102a944)
installed next-themes@0.3.0
Step 2: Create a theme provider (shadcn/ui)
New File
/src/providers/theme-provider.tsx
"use client";
import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ThemeProviderProps } from "next-themes/dist/types";
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}
Step 3: Wrap your root layout (shadcn/ui)
Update File
/src/app/layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "@/providers/theme-provider";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</body >
</html>
);
}
Use https in localhost
Update the package.json file of the project (Line 6)
{
"name": "fuzzie-automation",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --experimental-https",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"framer-motion": "^11.2.6",
"lucide-react": "^0.379.0",
"next": "14.2.3",
"next-themes": "^0.3.0",
"react": "^18",
"react-dom": "^18",
"tailwind-merge": "^2.3.0",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.3",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}
bun run dev
$ next dev --experimental-https
⚠ Self-signed certificates are currently an experimental feature, use with caution.
Attempting to generate self signed certificate. This may prompt for your password
CA Root certificate created in /Users/xxx/Library/Application Support/mkcert
Certificates created in /Users/xxx/Downloads/Learning/Next.js/fuzzie-automation/certificates
Adding certificates to .gitignore
▲ Next.js 14.2.3
- Local: https://localhost:3000
✓ Starting...
⚠ Found lockfile missing swc dependencies, patching...
✓ Ready in 2.6s
⚠ Lockfile was successfully patched, please run "npm install" to ensure @next/swc dependencies are downloaded
○ Compiling / ...
✓ Compiled / in 1956ms (541 modules)
GET / 200 in 2099ms
✓ Compiled in 98ms (255 modules)
Prisma
Installation:
bun i -D prisma
[0.45ms] ".env"
bun add v1.1.10 (5102a944)
installed prisma@5.14.0 with binaries:
- prisma
6 packages installed [3.87s]
Initialization:
bun prisma init
✔ Your Prisma schema was created at prisma/schema.prisma
You can now open it in your favorite editor.
warn Prisma would have added DATABASE_URL but it already exists in .env
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
Next steps:
1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started
2. Set the provider of the datasource block in schema.prisma to match your database: postgresql, mysql, sqlite, sqlserver, mongodb or cockroachdb.
3. Run prisma db pull to turn your database schema into a Prisma schema.
4. Run prisma generate to generate the Prisma Client. You can then start querying your database.
More information in our documentation:
https://pris.ly/d/getting-started
┌────────────────────────────────────────────────────────────────┐
│ Developing real-time features? │
│ Prisma Pulse lets you respond instantly to database changes. │
│ https://pris.ly/cli/pulse │
└────────────────────────────────────────────────────────────────┘
bun add @prisma/client
[0.32ms] ".env"
bun add v1.1.10 (5102a944)
installed @prisma/client@5.14.0
1 package installed [1280.00ms]
Database service website:
https://neon.tech/
bunx prisma generate
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
✔ Generated Prisma Client (v5.14.0) to ./node_modules/@prisma/client in 27ms
Start using Prisma Client in Node.js (See: https://pris.ly/d/client)
```
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
```
or start using Prisma Client at the edge (See: https://pris.ly/d/accelerate)
```
import { PrismaClient } from '@prisma/client/edge'
const prisma = new PrismaClient()
```
See other ways of importing Prisma Client: http://pris.ly/d/importing-client
┌─────────────────────────────────────────────────────────────┐
│ Deploying your app to serverless or edge functions? │
│ Try Prisma Accelerate for connection pooling and caching. │
│ https://pris.ly/cli/--accelerate │
└─────────────────────────────────────────────────────────────┘
bunx prisma db push
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": PostgreSQL database "neondb", schema "public" at "ep-crimson-queen-a5nvu13c.us-east-2.aws.neon.tech"
🚀 Your database is now in sync with your Prisma schema. Done in 6.19s
✔ Generated Prisma Client (v5.14.0) to ./node_modules/@prisma/client in 30ms
Prisma Studio:
bunx prisma studio
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Prisma Studio is up on http://localhost:5555
bun add @uploadcare/react-uploader
[0.54ms] ".env"
bun add v1.1.10 (5102a944)
installed @uploadcare/react-uploader@0.5.1
13 packages installed [6.06s]
