+
+ )
+}`,
+};
+
+export const metadata: Metadata = {
+ title: "Next.js Database with Prisma | Next-Generation ORM for SQL Databases",
+ description:
+ "Prisma is a next-generation ORM for Node.js & TypeScript. It's the easiest way to build Next.js apps with MySQL, PostgreSQL & SQL Server databases.",
+ alternates: {
+ canonical: "https://www.prisma.io/nextjs",
+ },
+};
+
+export default async function NextJsPage() {
+ return {post?.title || 'Post not found'}
+{post?.content || 'No content available'}
+
+
+ )
+}`,
+ "dynamic-data": `// app/dashboard/page.tsx
+
+import { auth } from '@/lib/auth'
+import { PrismaClient } from '@prisma/client'
+
+const prisma = new PrismaClient()
+
+// Dynamic by default
+export default async function DashboardPage() {
+ // Get the session using your auth solution
+ const session = await auth()
+
+ if (!session) {
+ redirect('/login')
+ }
+
+ const posts = await prisma.post.findMany({
+ where: {
+ authorId: session.user.id
+ }
+ })
+
+ return (
+ {post?.title || 'Post not found'}
+{post?.content || 'No content available'}
+-
+ {posts.map(post => (
+
- {post.title} + ))} +
-
+ {posts.map(post => (
+
- {post.title} + ))} +
Title
...
" }] + } + }, + "why_prisma": { + "title": "Resources", + "cards": [ + { + "image": "/images/blog/post.jpg", + "url": "/blog/post", + "badge": "Tutorial", + "date": "Oct 22, 2025", + "title": "How to...", + "description": "...", + "author": { "name": "John Doe", "avatar": "/images/authors/john.jpg" } + } + ] + }, + "quote": { + "text": "Quote text", + "author": { + "name": "Jane Doe", + "imageUrl": "/photos/jane.jpg", + "title": "CEO", + "company": "Company" + } + }, + "community": { + "title": "Community Examples", + "cards": [ + { + "icon": "fa-regular fa-file-lines", + "title": "...", + "description": "...", + "btn": { "label": "Read more", "url": "#" } + } + ] + } +} +``` + +### 2. Create code examples + +In your page file, define code examples that match the tab values: + +```tsx +const codeExamples: RecordHello World
+}`,
+ "dynamic-data": `// Another example...`,
+};
+```
+
+### 3. Create the page
+
+```tsx
+import type { Metadata } from "next";
+import * as data from "../../../data/prisma-with/nextjs.json";
+import { PrismaWithLayout } from "../../../components/prisma-with/layout";
+
+const codeExamples: Record
+
+ );
+}
diff --git a/apps/site/src/components/prisma-with/hero.tsx b/apps/site/src/components/prisma-with/hero.tsx
new file mode 100644
index 0000000000..4d68e8908d
--- /dev/null
+++ b/apps/site/src/components/prisma-with/hero.tsx
@@ -0,0 +1,89 @@
+import parse from "html-react-parser";
+import { cn } from "../../lib/cn";
+import { Button } from "@prisma/eclipse";
+
+type HeroData = {
+ tech: string;
+ eyebrow: string;
+ icon: string;
+ imageUrl: string;
+ imageUrlLight?: string;
+ title: string;
+ description: string;
+ btns: Array<{
+ label: string;
+ icon?: string;
+ url: string;
+ }>;
+};
+
+export function Hero({ data }: { data: HeroData }) {
+ return (
+
+
+ + {data.title} +
+
+ {data.cards.map((card, idx: number) => (
+ = 3 && idx === 3 && "md:col-start-2",
+ idx >= 3 && idx === 4 && "md:col-start-4",
+ )}
+ >
+
+ ))}
+
+
+
+
+
+
+ + {parse(card.title)} +
++ {parse(card.description)} +
+ + {card.btn.label} + +
+
+ );
+}
diff --git a/apps/site/src/components/prisma-with/how-section.tsx b/apps/site/src/components/prisma-with/how-section.tsx
new file mode 100644
index 0000000000..5832e6a9d5
--- /dev/null
+++ b/apps/site/src/components/prisma-with/how-section.tsx
@@ -0,0 +1,92 @@
+import parse from "html-react-parser";
+import { prisma_highlighter } from "../../lib/shiki_prisma";
+import {
+ CodeBlock,
+ Tabs,
+ TabsList,
+ TabsTrigger,
+ TabsContent,
+} from "@prisma/eclipse";
+
+type HowSectionData = {
+ title: string;
+ description: string;
+ tabs: {
+ defaultValue: string;
+ head: Array<{
+ title: string;
+ value: string;
+ }>;
+ body: Array<{
+ value: string;
+ content: string;
+ }>;
+ };
+};
+
+export async function HowSection({
+ data,
+ codeExamples,
+}: {
+ data: HowSectionData;
+ codeExamples: Record
+
+
+
+
+
+ + + + {data.eyebrow} + +
++ {parse(data.title)} +
++ {parse(data.description)} +
+
+
+
+
+
+
+
+ 
+ {data.imageUrlLight && (
+ 
+ )}
+
+
+ 
+ 
+
+
+
+
+
+ );
+}
diff --git a/apps/site/src/components/prisma-with/index.ts b/apps/site/src/components/prisma-with/index.ts
new file mode 100644
index 0000000000..85e11311cc
--- /dev/null
+++ b/apps/site/src/components/prisma-with/index.ts
@@ -0,0 +1,7 @@
+export { Hero } from "./hero";
+export { WhySection } from "./why-section";
+export { HowSection } from "./how-section";
+export { ResourcesSection } from "./resources-section";
+export { QuoteSection } from "./quote-section";
+export { CommunitySection } from "./community-section";
+export { PrismaWithLayout, type PrismaWithData } from "./layout";
diff --git a/apps/site/src/components/prisma-with/layout.tsx b/apps/site/src/components/prisma-with/layout.tsx
new file mode 100644
index 0000000000..6dcd358d8d
--- /dev/null
+++ b/apps/site/src/components/prisma-with/layout.tsx
@@ -0,0 +1,101 @@
+import { Hero } from "./hero";
+import { WhySection } from "./why-section";
+import { HowSection } from "./how-section";
+import { ResourcesSection } from "./resources-section";
+import { QuoteSection } from "./quote-section";
+import { CommunitySection } from "./community-section";
+
+export type PrismaWithData = {
+ hero: {
+ tech: string;
+ eyebrow: string;
+ icon: string;
+ imageUrl: string;
+ imageUrlLight?: string;
+ title: string;
+ description: string;
+ btns: Array<{
+ label: string;
+ icon?: string;
+ url: string;
+ }>;
+ };
+ why: {
+ title: string;
+ cards: Array<{
+ icon: string;
+ title: string;
+ description: string;
+ }>;
+ };
+ how: {
+ title: string;
+ description: string;
+ tabs: {
+ defaultValue: string;
+ head: Array<{
+ title: string;
+ value: string;
+ }>;
+ body: Array<{
+ value: string;
+ content: string;
+ }>;
+ };
+ };
+ why_prisma: {
+ title: string;
+ cards: Array<{
+ image: string;
+ url: string;
+ badge: string;
+ date: string;
+ title: string;
+ description: string;
+ author: {
+ name: string;
+ avatar: string;
+ };
+ }>;
+ };
+ quote: {
+ text: string;
+ author: {
+ name: string;
+ imageUrl: string;
+ title: string;
+ company: string;
+ };
+ };
+ community: {
+ title: string;
+ cards: Array<{
+ icon: string;
+ title: string;
+ description: string;
+ btn: {
+ label: string;
+ url: string;
+ };
+ }>;
+ };
+};
+
+export async function PrismaWithLayout({
+ data,
+ codeExamples,
+}: {
+ data: PrismaWithData;
+ codeExamples: Record
+
+ + {data.title} +
++ {data.description} +
+
+
+
+ {data.tabs.head.map((tab) => (
+
+ {tab.title}
+
+ ))}
+
+ {await Promise.all(
+ data.tabs.body.map(async (body) => {
+ return (
+
+
+ );
+ }),
+ )}
+
+
+
+ {parse(body.content)}
+
+
+ {codeExamples[body.value] && (
+
+
+
+ )}
+
+
+
+ );
+}
diff --git a/apps/site/src/components/prisma-with/resources-section.tsx b/apps/site/src/components/prisma-with/resources-section.tsx
new file mode 100644
index 0000000000..8965084fce
--- /dev/null
+++ b/apps/site/src/components/prisma-with/resources-section.tsx
@@ -0,0 +1,55 @@
+import { PostCard } from "@prisma-docs/ui/components/post-card";
+
+type ResourcesSectionData = {
+ title: string;
+ cards: Array<{
+ image: string;
+ url: string;
+ badge: string;
+ date: string;
+ title: string;
+ description: string;
+ author: {
+ name: string;
+ avatar: string;
+ };
+ }>;
+};
+
+export function ResourcesSection({ data }: { data: ResourcesSectionData }) {
+ return (
+
+
+ ++{data.text}
+
+
+ );
+}
diff --git a/apps/site/src/components/prisma-with/why-section.tsx b/apps/site/src/components/prisma-with/why-section.tsx
new file mode 100644
index 0000000000..1f64c51f24
--- /dev/null
+++ b/apps/site/src/components/prisma-with/why-section.tsx
@@ -0,0 +1,44 @@
+import parse from "html-react-parser";
+import { cn } from "../../lib/cn";
+import { Card, Action } from "@prisma/eclipse";
+
+type WhySectionData = {
+ title: string;
+ cards: Array<{
+ icon: string;
+ title: string;
+ description: string;
+ }>;
+};
+
+export function WhySection({ data }: { data: WhySectionData }) {
+ return (
+
+
+ + {data.title} +
+
+ {data.cards.map((card, idx: number) => (
+
+
+
+ ))}
+
+
+ );
+}
diff --git a/apps/site/src/data/prisma-with/nestjs.json b/apps/site/src/data/prisma-with/nestjs.json
new file mode 100644
index 0000000000..04a6d47a81
--- /dev/null
+++ b/apps/site/src/data/prisma-with/nestjs.json
@@ -0,0 +1,178 @@
+{
+ "hero": {
+ "tech": "NestJS",
+ "eyebrow": "Prisma in your stack",
+ "icon": "fa-solid fa-layer-group",
+ "imageUrl": "/icons/technologies/nestjs.svg",
+ "imageUrlLight": "/icons/technologies/nestjs-light.svg",
+ "title": "Enterprise-ready database for NestJS apps",
+ "description": "Build high-performance and type-safe NestJS apps with Prisma's developer friendly database tools: The world's most popular TypeScript ORM and the first serverless Postgres database without cold starts.",
+ "btns": [
+ {
+ "label": "Try NestJS with Prisma",
+ "icon": "fa-regular fa-arrow-right",
+ "url": "https://github.com/prisma/nextjs-prisma-postgres-demo"
+ },
+ {
+ "label": "Read the docs",
+ "icon": "fa-regular fa-book-open",
+ "url": "/docs/guides/nestjs"
+ }
+ ]
+ },
+ "why": {
+ "title": "Why Prisma and Nest.js?",
+ "cards": [
+ {
+ "icon": "fa-regular fa-bolt",
+ "title": "Built for high-performance web apps",
+ "description": "Built on unikernels, Prisma Postgres runs on bare metal servers for peak performance and infinite scalability."
+ },
+ {
+ "icon": "fa-regular fa-head-side-brain",
+ "title": "Serverless, without cold starts",
+ "description": "The first serverless database with pay-as-you-go pricing, no infrastructure management, and zero cold starts."
+ },
+ {
+ "icon": "fa-regular fa-cloud-arrow-down",
+ "title": "Flexible data fetching & rendering",
+ "description": "Display your data using client-side rendering, server-side rendering and static site generation."
+ },
+ {
+ "icon": "fa-regular fa-globe",
+ "title": "Built-in global caching",
+ "description": "Add a cache strategy to any database query and its results will be cached close to your users for peak performance and UX."
+ },
+ {
+ "icon": "fa-regular fa-umbrella",
+ "title": "End-to-end type safety",
+ "description": "Pairing Prisma with Next.js ensures your app is coherently typed, from the database to your React components."
+ },
+ {
+ "icon": "fa-regular fa-users",
+ "title": "Helpful communities",
+ "description": "Both Next.js and Prisma have vibrant communities where you find support, fun events and amazing developers."
+ }
+ ]
+ },
+ "how": {
+ "title": "How Prisma and Next.js fit together",
+ "description": "Prisma’s database tools are the perfect fit for building Next.js applications, serving as the data access layer for Server Components (both static and dynamic), Server Actions, Route Handlers, and standalone services.",
+ "tabs": {
+ "defaultValue": "static-data",
+ "head": [
+ { "title": "Static Data", "value": "static-data" },
+ { "title": "Dynamic Data", "value": "dynamic-data" },
+ { "title": "Server Actions", "value": "server-actions" },
+ { "title": "API Routes", "value": "api-routes" },
+ { "title": "Client Components", "value": "client-components" }
+ ],
+ "body": [
+ {
+ "value": "static-data",
+ "content": "
+
+
+
+ + {data.title} +
+
+ {data.cards.map((card) => (
+
+
+
+
+
+ ))}
+
+ + {parse(card.title)} +
++ {parse(card.description)} +
+Static Site Generation with Prisma
Next.js 13+ introduced a fundamental shift in how we handle data fetching. Server Components, which are the default in the App Router, allow you to fetch data directly in your components without extra wrappers or special functions. This means you can use Prisma directly in your components and automatically get static generation when possible.
Here's how to implement a blog page that's statically generated at build time. The data fetching happens server-side, and the HTML is generated once during build.
" + } + ] + } + }, + "why_prisma": { + "title": "Why Prisma and Next.js?", + "cards": [ + { + "image": "/images/blog/prisma-nextjs-orm.jpg", + "url": "/blog/post-slug", + "badge": "Release", + "date": "October 22, 2025", + "title": "How to use Prisma ORM with Next.js", + "description": "Learn how to build a fullstack Next.js 15 app with Prisma Postgres from scratch! This tutorial starts...", + "author": { + "name": "Johan Schmidt", + "avatar": "/images/authors/johan-schmidt.jpg" + } + }, + { + "image": "/images/blog/nextjs-prisma-postgres-auth.jpg", + "badge": "Release", + "date": "October 22, 2025", + "url": "/blog/post-slug", + "title": "Next.js 15 + Prisma Postgres Auth Example", + "description": "This demo for a blogging application demonstrates how to build login and functionalit...", + "author": { + "name": "Johan Schmidt", + "avatar": "/images/authors/johan-schmidt.jpg" + } + }, + { + "image": "/images/blog/nextjs-demo-app.jpg", + "badge": "Release", + "date": "October 22, 2025", + "url": "/blog/post-slug", + "title": "Next.js 15 Demo App with Prisma Postgres", + "description": "This demo for a blogging application demonstrates how to build login and functionalit...", + "author": { + "name": "Johan Schmidt", + "avatar": "/images/authors/johan-schmidt.jpg" + } + } + ] + }, + "quote": { + "text": "“Next.js and Prisma is the ultimate combo if you need a database in React apps! 🚀”", + "author": { + "name": "Guillermo Rauch", + "imageUrl": "/photos/people/guillermo-rauch.jpeg", + "title": "CEO & Founder", + "company": "Vercel" + } + }, + "community": { + "title": "Community Examples", + "cards": [ + { + "icon": "fa-regular fa-file-lines", + "title": "Modern SaaS Starter Kit: next-forge", + "description": "A starter template for modern SaaS apps! next-forge comes with Next.js 15, auth, DB & ORM, payments, docs, blog, oitly, analytics, emails, and a lot more, t...", + "btn": { + "label": "Read tutorial", + "url": "#" + } + }, + { + "icon": "fa-regular fa-file-lines", + "title": "Prisma in Next.js - My Fav Way to Work with Databases", + "description": "Learn best practices for using Prisma with Next.js App Router! Explore server components, server actions, and edge middleware, plus efficient queryi...", + "btn": { + "label": "Read tutorial", + "url": "#" + } + }, + { + "icon": "fa-regular fa-file-lines", + "title": "Fullstack Form Builder", + "description": "This comprehensive 4-hour tutorial teaches you how to build a fullstack application. The form will be responsive, allow for drag & drop functionality, feat...", + "btn": { + "label": "Read tutorial", + "url": "#" + } + }, + { + "icon": "fa-regular fa-code", + "title": "t3 Stack", + "description": "t3 is a web development stack focused on simplicity, modularity, and full-stack type safety. It includes Next.js, tRPC, Tailwind, TypeScript, Prisma and Nex...", + "btn": { + "label": "Explore on GitHub", + "url": "#" + } + }, + { + "icon": "fa-regular fa-code", + "title": "Blitz.js", + "description": "Blitz.js is an application framework that is built on top of Next.js and Prisma. It brings back the simplicity and conventions of server-rendered fram...", + "btn": { + "label": "Visit Blitz.js website", + "url": "#" + } + } + ] + } +} diff --git a/apps/site/src/data/prisma-with/nextjs.json b/apps/site/src/data/prisma-with/nextjs.json new file mode 100644 index 0000000000..9e9588c2d9 --- /dev/null +++ b/apps/site/src/data/prisma-with/nextjs.json @@ -0,0 +1,194 @@ +{ + "hero": { + "tech": "Next.js", + "eyebrow": "Prisma in your stack", + "icon": "fa-solid fa-layer-group", + "imageUrl": "/icons/technologies/nextjs.svg", + "imageUrlLight": "/icons/technologies/nextjs-light.svg", + "title": "The easiest way to use Prisma in Next.js", + "description": "Build fast, type-safe Next.js apps with the world's most popular TypeScript ORM and the first serverless Postgres without cold starts.", + "btns": [ + { + "label": "Try Next.js with Prisma", + "icon": "fa-regular fa-arrow-right", + "url": "https://github.com/prisma/nextjs-prisma-postgres-demo" + }, + { + "label": "Read the docs", + "icon": "fa-regular fa-book-open", + "url": "/docs/guides/nextjs" + } + ] + }, + "why": { + "title": "Why Prisma and Next.js?", + "cards": [ + { + "icon": "fa-regular fa-bolt", + "title": "Built for high-performance web apps", + "description": "Built on unikernels, Prisma Postgres runs on bare metal servers for peak performance and infinite scalability." + }, + { + "icon": "fa-regular fa-face-icicles", + "title": "Serverless, without cold starts", + "description": "The first serverless database with pay-as-you-go pricing, no infrastructure management, and zero cold starts." + }, + { + "icon": "fa-regular fa-cloud-arrow-up", + "title": "Flexible data fetching & rendering", + "description": "Display your data using client-side rendering, server-side rendering and static site generation." + }, + { + "icon": "fa-regular fa-globe-pointer", + "title": "Built-in global caching", + "description": "Add a cache strategy to any database query and its results will be cached close to your users for peak performance and UX." + }, + { + "icon": "fa-regular fa-umbrella", + "title": "End-to-end type safety", + "description": "Pairing Prisma with Next.js ensures your app is coherently typed, from the database to your React components." + }, + { + "icon": "fa-regular fa-people-arrows", + "title": "Helpful communities", + "description": "Both Next.js and Prisma have vibrant communities where you find support, fun events and amazing developers." + } + ] + }, + "how": { + "title": "How Prisma and Next.js fit together", + "description": "Prisma’s database tools are the perfect fit for building Next.js applications, serving as the data access layer for Server Components (both static and dynamic), Server Actions, Route Handlers, and standalone services.", + "tabs": { + "defaultValue": "static-data", + "head": [ + { "title": "Static Data", "value": "static-data" }, + { "title": "Dynamic Data", "value": "dynamic-data" }, + { "title": "Server Actions", "value": "server-actions" }, + { "title": "API Routes", "value": "api-routes" }, + { "title": "Client Components", "value": "client-components" } + ], + "body": [ + { + "value": "static-data", + "content": "Static Site Generation with Prisma
Next.js 13+ introduced a fundamental shift in how we handle data fetching. Server Components, which are the default in the App Router, allow you to fetch data directly in your components without extra wrappers or special functions. This means you can use Prisma directly in your components and automatically get static generation when possible.
Here's how to implement a blog page that's statically generated at build time. The data fetching happens server-side, and the HTML is generated once during build.
" + }, + { + "value": "dynamic-data", + "content": "Dynamic Server-Side Data Fetching with Prisma
For dynamic data that needs to be fresh on every request, like a user's dashboard or authenticated content, Server Components can be used. They automatically execute on the server for each request, making them perfect for displaying real-time or user-specific data. The following example shows how to implement a dashboard that displays user-specific content.
" + }, + { + "value": "server-actions", + "content": "Server Actions with Prisma
Server Actions can be used in place of API routes for many cases. They allow you to define server-side functions that can be called directly from your components, making them perfect for database mutations. They're also progressive enhancement-friendly, working even without JavaScript enabled.
" + }, + { + "value": "api-routes", + "content": "API Routes with Route Handlers
While Server Actions cover many use cases, sometimes you still need traditional API endpoints, like for webhook handlers or public APIs. Next.js 13+ introduces Route Handlers as a replacement for API routes. These handlers are more powerful and flexible than the old API routes, supporting modern Web API standards.
" + }, + { + "value": "client-components", + "content": "Client Components with Server Data
Sometimes you need to combine server-side data fetching with client-side interactivity. Next.js makes this easy by allowing you to pass server-fetched data to Client Components. This pattern is perfect for cases where you want the initial data to be server-rendered but need client-side interactivity after the initial load.
" + } + ] + } + }, + "why_prisma": { + "title": "Why Prisma and Next.js?", + "cards": [ + { + "image": "/images/blog/prisma-nextjs-orm.jpg", + "url": "/blog/post-slug", + "badge": "Vercel", + "date": "October 22, 2025", + "title": "How to use Prisma ORM with Next.js", + "description": "Learn how to build a fullstack Next.js 15 app with Prisma Postgres from scratch! This tutorial starts...", + "author": { + "name": "Johan Schmidt", + "avatar": "/images/authors/johan-schmidt.jpg" + } + }, + { + "image": "/images/blog/nextjs-prisma-postgres-auth.jpg", + "badge": "Prisma Postgres", + "date": "October 22, 2025", + "url": "/blog/post-slug", + "title": "Next.js 15 + Prisma Postgres Auth Example", + "description": "This demo for a blogging application demonstrates how to build login and functionalit...", + "author": { + "name": "Johan Schmidt", + "avatar": "/images/authors/johan-schmidt.jpg" + } + }, + { + "image": "/images/blog/nextjs-demo-app.jpg", + "badge": "Release", + "date": "October 22, 2025", + "url": "/blog/post-slug", + "title": "Next.js 15 Demo App with Prisma Postgres", + "description": "This demo for a blogging application demonstrates how to build login and functionalit...", + "author": { + "name": "Johan Schmidt", + "avatar": "/images/authors/johan-schmidt.jpg" + } + } + ] + }, + "quote": { + "text": "“Next.js and Prisma is the ultimate combo if you need a database in React apps! 🚀”", + "author": { + "name": "Guillermo Rauch", + "imageUrl": "/photos/people/guillermo-rauch.jpeg", + "title": "CEO & Founder", + "company": "Vercel" + } + }, + "community": { + "title": "Community Examples", + "cards": [ + { + "icon": "fa-regular fa-file-lines", + "title": "Modern SaaS Starter Kit: next-forge", + "description": "A starter template for modern SaaS apps! next-forge comes with Next.js 15, auth, DB & ORM, payments, docs, blog, oitly, analytics, emails, and a lot more, t...", + "btn": { + "label": "Read tutorial", + "url": "https://www.next-forge.com/" + } + }, + { + "icon": "fa-regular fa-file-lines", + "title": "Prisma in Next.js - My Fav Way to Work with Databases", + "description": "Learn best practices for using Prisma with Next.js App Router! Explore server components, server actions, and edge middleware, plus efficient queryi...", + "btn": { + "label": "Read tutorial", + "url": "https://www.youtube.com/watch?v=QXxy8Uv1LnQ" + } + }, + { + "icon": "fa-regular fa-file-lines", + "title": "Fullstack Form Builder", + "description": "This comprehensive 4-hour tutorial teaches you how to build a fullstack application. The form will be responsive, allow for drag & drop functionality, feat...", + "btn": { + "label": "Watch tutorial", + "url": "https://www.youtube.com/watch?v=QGXUUXy0AMw&ab_channel=CodewithKliton" + } + }, + { + "icon": "fa-regular fa-code", + "title": "t3 Stack", + "description": "t3 is a web development stack focused on simplicity, modularity, and full-stack type safety. It includes Next.js, tRPC, Tailwind, TypeScript, Prisma and Nex...", + "btn": { + "label": "Explore on GitHub", + "url": "https://github.com/t3-oss/create-t3-app" + } + }, + { + "icon": "fa-regular fa-code", + "title": "Blitz.js", + "description": "Blitz.js is an application framework that is built on top of Next.js and Prisma. It brings back the simplicity and conventions of server-rendered fram...", + "btn": { + "label": "Visit Blitz.js website", + "url": "https://blitzjs.com/" + } + } + ] + } +} diff --git a/apps/site/src/data/prisma-with/remix.json b/apps/site/src/data/prisma-with/remix.json new file mode 100644 index 0000000000..25759838c4 --- /dev/null +++ b/apps/site/src/data/prisma-with/remix.json @@ -0,0 +1,184 @@ +{ + "hero": { + "tech": "Remix", + "eyebrow": "Prisma in your stack", + "icon": "fa-solid fa-layer-group", + "imageUrl": "/icons/technologies/remix.svg", + "imageUrlLight": "/icons/technologies/remix-light.svg", + "title": "Build fullstack Remix apps with Prisma", + "description": "Prisma is the perfect database toolkit for Remix applications. Get type-safe database access, migrations, and data modeling that works seamlessly with Remix loaders and actions.", + "btns": [ + { + "label": "Try Remix with Prisma", + "icon": "fa-regular fa-arrow-right", + "url": "https://github.com/prisma/remix-prisma-starter" + }, + { + "label": "Read the docs", + "icon": "fa-regular fa-book-open", + "url": "/docs/guides/remix" + } + ] + }, + "why": { + "title": "Why Prisma and Remix?", + "cards": [ + { + "icon": "fa-regular fa-bolt", + "title": "Server-side data fetching", + "description": "Remix loaders run on the server, making Prisma the perfect choice for fetching data with full type safety from database to UI." + }, + { + "icon": "fa-regular fa-arrows-rotate", + "title": "Seamless mutations", + "description": "Use Prisma in Remix actions to handle form submissions and mutations with end-to-end type safety." + }, + { + "icon": "fa-regular fa-database", + "title": "Optimistic UI updates", + "description": "Remix's optimistic UI patterns work perfectly with Prisma's predictable data layer for instant user feedback." + }, + { + "icon": "fa-regular fa-shield-check", + "title": "Type-safe by default", + "description": "Prisma Client generates types from your schema, ensuring your entire Remix app is coherently typed." + }, + { + "icon": "fa-regular fa-gauge-high", + "title": "Edge-ready architecture", + "description": "Deploy to the edge with Prisma Accelerate for ultra-low latency database queries worldwide." + }, + { + "icon": "fa-regular fa-code-branch", + "title": "Developer experience", + "description": "Prisma Studio + Remix Dev Tools = the ultimate fullstack development experience." + } + ] + }, + "how": { + "title": "How Prisma and Remix fit together", + "description": "Prisma integrates seamlessly with Remix's data loading and mutation patterns. Use Prisma Client in loaders for data fetching and in actions for mutations, all with full type safety.", + "tabs": { + "defaultValue": "loaders", + "head": [ + { "title": "Loaders", "value": "loaders" }, + { "title": "Actions", "value": "actions" }, + { "title": "Error Handling", "value": "error-handling" } + ], + "body": [ + { + "value": "loaders", + "content": "Data Loading with Prisma
Remix loaders are the perfect place to use Prisma. They run on the server, so you have full access to your database. The data you return is automatically serialized and sent to your component.
" + }, + { + "value": "actions", + "content": "Mutations with Prisma
Remix actions handle form submissions and mutations. Use Prisma to create, update, or delete data, then redirect or return updated data to your UI.
" + }, + { + "value": "error-handling", + "content": "Error Boundaries
Combine Remix's error boundaries with Prisma's error handling for robust, user-friendly error states throughout your application.
" + } + ] + } + }, + "why_prisma": { + "title": "Learn more about Prisma and Remix", + "cards": [ + { + "image": "/images/blog/remix-prisma-starter.jpg", + "url": "/blog/remix-prisma-starter", + "badge": "Tutorial", + "date": "November 15, 2024", + "title": "Build a fullstack Remix app with Prisma", + "description": "Learn how to build a complete Remix application with Prisma from scratch, including authentication and CRUD operations.", + "author": { + "name": "Sarah Johnson", + "avatar": "/images/authors/sarah-johnson.jpg" + } + }, + { + "image": "/images/blog/remix-optimistic-ui.jpg", + "badge": "Guide", + "date": "October 8, 2024", + "url": "/blog/remix-optimistic-ui", + "title": "Optimistic UI with Remix and Prisma", + "description": "Master optimistic UI patterns in Remix with Prisma for instant user feedback and better UX.", + "author": { + "name": "Mike Chen", + "avatar": "/images/authors/mike-chen.jpg" + } + }, + { + "image": "/images/blog/remix-edge-deployment.jpg", + "badge": "Guide", + "date": "September 22, 2024", + "url": "/blog/remix-edge-deployment", + "title": "Deploy Remix + Prisma to the Edge", + "description": "Learn how to deploy your Remix app with Prisma to edge networks for global low-latency performance.", + "author": { + "name": "Alex Rivera", + "avatar": "/images/authors/alex-rivera.jpg" + } + } + ] + }, + "quote": { + "text": "Prisma + Remix is my go-to stack for building modern web apps. The DX is unmatched!", + "author": { + "name": "Kent C. Dodds", + "imageUrl": "/photos/people/kent-c-dodds.jpeg", + "title": "Educator & Engineer", + "company": "EpicWeb.dev" + } + }, + "community": { + "title": "Community Resources", + "cards": [ + { + "icon": "fa-regular fa-file-lines", + "title": "Remix Blues Stack", + "description": "The official Remix Blues Stack comes with Prisma pre-configured. Perfect for PostgreSQL-based apps with authentication, testing, and deployment setup.", + "btn": { + "label": "View on GitHub", + "url": "https://github.com/remix-run/blues-stack" + } + }, + { + "icon": "fa-regular fa-video", + "title": "Kent C. Dodds: Remix + Prisma Workshop", + "description": "Deep dive into building production-ready Remix applications with Prisma. Covers data modeling, migrations, and best practices.", + "btn": { + "label": "Watch workshop", + "url": "#" + } + }, + { + "icon": "fa-regular fa-code", + "title": "Remix SaaS Template", + "description": "A complete SaaS starter template with Remix, Prisma, authentication, payments, and multi-tenancy built-in.", + "btn": { + "label": "Explore template", + "url": "#" + } + }, + { + "icon": "fa-regular fa-book", + "title": "Prisma in Remix Cookbook", + "description": "Collection of recipes and patterns for common use cases when using Prisma with Remix, from pagination to real-time updates.", + "btn": { + "label": "Read cookbook", + "url": "#" + } + }, + { + "icon": "fa-regular fa-graduation-cap", + "title": "Fullstack Remix Course", + "description": "Learn to build a complete e-commerce application with Remix and Prisma. Includes video lessons, exercises, and project files.", + "btn": { + "label": "Start learning", + "url": "#" + } + } + ] + } +} diff --git a/apps/site/src/lib/cn.ts b/apps/site/src/lib/cn.ts new file mode 100644 index 0000000000..ba66fd250b --- /dev/null +++ b/apps/site/src/lib/cn.ts @@ -0,0 +1 @@ +export { twMerge as cn } from 'tailwind-merge'; diff --git a/apps/site/src/lib/shiki_prisma.ts b/apps/site/src/lib/shiki_prisma.ts new file mode 100644 index 0000000000..d240aa9828 --- /dev/null +++ b/apps/site/src/lib/shiki_prisma.ts @@ -0,0 +1,207 @@ +import { createHighlighter, type ThemeRegistration } from "shiki"; + +const prismaTheme: ThemeRegistration = { + name: "prisma-dark", + type: "dark", + colors: { + "editor.background": "transparent", + "editor.foreground": "var(--color-foreground-neutral-weak)", + }, + settings: [ + { + scope: ["comment", "punctuation.definition.comment"], + settings: { + foreground: "var(--color-disabled)", + }, + }, + { + scope: [ + "variable", + "variable.other.readwrite", + "variable.other.object", + "variable.other.property", + "support.variable", + ], + settings: { + foreground: "var(--color-foreground-neutral-weak)", + }, + }, + { + scope: [ + "variable.other.constant", + "variable.language.this", + "variable.language.super", + ], + settings: { + foreground: "var(--color-background-ppg-reverse-strong)", + }, + }, + { + scope: [ + "keyword", + "keyword.control", + "keyword.operator.new", + "keyword.control.import", + "keyword.control.export", + "keyword.control.from", + "keyword.control.default", + "keyword.control.as", + "keyword.control.async", + "keyword.control.await", + "storage.type", + "storage.modifier", + "storage.type.function", + "storage.type.class", + "storage.type.const", + "storage.type.let", + "storage.type.var", + ], + settings: { + foreground: "var(--color-background-orm-reverse-strong)", + }, + }, + { + scope: [ + "entity.name.function", + "meta.function-call", + "support.function", + "entity.name.method", + ], + settings: { + foreground: "var(--color-background-ppg-reverse-strong)", + }, + }, + { + scope: [ + "entity.name.type", + "entity.name.class", + "support.type", + "support.class", + "meta.import variable.other.readwrite", + "meta.export variable.other.readwrite", + ], + settings: { + foreground: "var(--color-background-orm-reverse-strong)", + }, + }, + { + scope: [ + "string", + "string.quoted.single", + "string.quoted.double", + "string.template", + "punctuation.definition.string.begin", + "punctuation.definition.string.end", + ], + settings: { + foreground: "var(--color-background-ppg-reverse-strong)", + }, + }, + { + scope: ["constant.numeric", "constant.language", "constant.character"], + settings: { + foreground: "var(--color-background-warning-reverse-strong)", + }, + }, + { + scope: [ + "constant.language.boolean", + "constant.language.null", + "constant.language.undefined", + ], + settings: { + foreground: "var(--color-background-orm-reverse-strong)", + }, + }, + { + scope: [ + "keyword.operator", + "keyword.operator.arithmetic", + "keyword.operator.assignment", + "keyword.operator.comparison", + "keyword.operator.logical", + ], + settings: { + foreground: "var(--color-background-orm-reverse-strong)", + }, + }, + { + scope: ["keyword.operator.type", "keyword.operator.expression"], + settings: { + foreground: "var(--color-background-orm-reverse-strong)", + }, + }, + { + scope: [ + "punctuation.accessor", + "punctuation.separator", + "punctuation.terminator", + "punctuation.definition.block", + "punctuation.definition.parameters", + "punctuation.definition.arguments", + "meta.brace.round", + "meta.brace.square", + "meta.brace.curly", + ], + settings: { + foreground: "var(--color-foreground-neutral-weak)", + }, + }, + { + scope: ["entity.name.tag", "punctuation.definition.tag"], + settings: { + foreground: "#f92672", + }, + }, + { + scope: ["entity.other.attribute-name"], + settings: { + foreground: "var(--color-background-ppg-reverse-strong)", + }, + }, + { + scope: ["meta.tag.attributes string.quoted"], + settings: { + foreground: "#96E072", + }, + }, + { + scope: [ + "punctuation.definition.template-expression", + "punctuation.section.embedded", + ], + settings: { + foreground: "#f92672", + }, + }, + { + scope: ["meta.template.expression"], + settings: { + foreground: "#D5CED9", + }, + }, + { + scope: ["support.type.primitive", "support.type.builtin"], + settings: { + foreground: "#7cb7ff", + }, + }, + { + scope: ["variable.parameter", "meta.parameters variable"], + settings: { + foreground: "var(--color-background-warning-reverse-strong)", + }, + }, + { + scope: ["invalid", "invalid.illegal"], + settings: { + foreground: "#FC644D", + }, + }, + ], +}; + +export const prisma_highlighter = await createHighlighter({ + themes: [prismaTheme], + langs: ["typescript", "javascript", "jsx", "tsx", "json", "bash", "sh"], +}); diff --git a/apps/site/src/lib/blog-metadata.ts b/apps/site/src/lib/site-metadata.ts similarity index 100% rename from apps/site/src/lib/blog-metadata.ts rename to apps/site/src/lib/site-metadata.ts diff --git a/packages/eclipse/src/components/button.tsx b/packages/eclipse/src/components/button.tsx index 061f56253c..256477d76d 100644 --- a/packages/eclipse/src/components/button.tsx +++ b/packages/eclipse/src/components/button.tsx @@ -5,29 +5,36 @@ import { cn } from "../lib/cn"; const buttonVariants = cva( "flex flex-row justify-center items-center rounded-square transition-all duration-50 cursor-pointer disabled:bg-background-neutral-weak! disabled:border-none! disabled:text-foreground-neutral-weaker! disabled:cursor-not-allowed disabled:shadow-none", { - variants: { - variant: { - ppg: "bg-background-ppg-reverse text-foreground-ppg-reverse hover:bg-background-ppg-reverse-strong shadow-box-low", - orm: "bg-background-orm-reverse text-foreground-orm-reverse hover:bg-background-orm-reverse-strong shadow-box-low", - "default-stronger": "bg-background-neutral text-foreground-neutral hover:bg-background-neutral-strong", - default: "bg-background-default hover:bg-background-neutral border border-stroke-neutral hover:border-stroke-neutral-strong text-foreground-neutral shadow-box-low", - "default-weaker": "bg-transparent hover:bg-background-neutral text-foreground-neutral", - error: "bg-background-error-reverse text-foreground-error-reverse hover:bg-background-error-reverse-strong shadow-box-low", - success: "bg-background-success-reverse text-foreground-success-reverse hover:bg-background-success-reverse-strong shadow-box-low", - link: "text-foreground-neutral underline-offset-4 hover:underline focus-visible:ring-foreground-neutral", + variants: { + variant: { + ppg: "bg-background-ppg-reverse text-foreground-ppg-reverse hover:bg-background-ppg-reverse-strong shadow-box-low", + orm: "bg-background-orm-reverse text-foreground-orm-reverse hover:bg-background-orm-reverse-strong shadow-box-low", + "default-stronger": + "bg-background-neutral text-foreground-neutral hover:bg-background-neutral-strong border border-stroke-neutral-strong", + default: + "bg-background-default hover:bg-background-neutral border border-stroke-neutral hover:border-stroke-neutral-strong text-foreground-neutral shadow-box-low", + "default-weaker": + "bg-transparent hover:bg-background-neutral text-foreground-neutral", + error: + "bg-background-error-reverse text-foreground-error-reverse hover:bg-background-error-reverse-strong shadow-box-low", + success: + "bg-background-success-reverse text-foreground-success-reverse hover:bg-background-success-reverse-strong shadow-box-low", + link: "text-foreground-neutral underline-offset-4 hover:underline focus-visible:ring-foreground-neutral", + }, + size: { + lg: "px-2 h-element-lg type-text-sm-strong", + xl: "px-3 h-element-xl type-text-sm-strong", + "2xl": "px-3 h-element-2xl type-text-sm-strong", + "3xl": "px-4 h-element-3xl type-text-sm-strong", + "4xl": "px-4 h-element-4xl type-heading-md", + }, }, - size: { - lg: "px-2 h-element-lg type-text-sm-strong", - xl: "px-3 h-element-xl type-text-sm-strong", - "2xl": "px-3 h-element-2xl type-text-sm-strong", - "4xl": "px-4 h-element-4xl type-heading-md", + defaultVariants: { + variant: "default", + size: "lg", }, }, - defaultVariants: { - variant: "default", - size: "lg", - }, -}); +); type ButtonBaseProps = VariantProps