From fa8940e08e195d831be8dc363534b5c238375cbc Mon Sep 17 00:00:00 2001 From: Aman Varshney Date: Thu, 4 Jun 2026 15:29:36 +0530 Subject: [PATCH 1/3] docs: add Prisma Next getting started guides --- .../next/add-to-existing-project/mongodb.mdx | 37 ++++----- .../add-to-existing-project/postgresql.mdx | 47 +++++------ .../docs/(index)/next/create-prisma.mdx | 80 ------------------- apps/docs/content/docs/(index)/next/index.mdx | 56 ++++++++++--- apps/docs/content/docs/(index)/next/meta.json | 2 +- .../docs/(index)/next/quickstart/meta.json | 4 + .../docs/(index)/next/quickstart/mongodb.mdx | 63 +++++++++++++++ .../(index)/next/quickstart/postgresql.mdx | 61 ++++++++++++++ apps/docs/content/docs/cli/next/index.mdx | 2 +- apps/docs/content/docs/cli/next/init.mdx | 2 +- apps/docs/content/docs/orm/next/index.mdx | 2 +- apps/docs/next.config.mjs | 12 +-- apps/docs/src/lib/version.ts | 7 +- 13 files changed, 223 insertions(+), 152 deletions(-) delete mode 100644 apps/docs/content/docs/(index)/next/create-prisma.mdx create mode 100644 apps/docs/content/docs/(index)/next/quickstart/meta.json create mode 100644 apps/docs/content/docs/(index)/next/quickstart/mongodb.mdx create mode 100644 apps/docs/content/docs/(index)/next/quickstart/postgresql.mdx diff --git a/apps/docs/content/docs/(index)/next/add-to-existing-project/mongodb.mdx b/apps/docs/content/docs/(index)/next/add-to-existing-project/mongodb.mdx index 15dd0684c0..86f158401d 100644 --- a/apps/docs/content/docs/(index)/next/add-to-existing-project/mongodb.mdx +++ b/apps/docs/content/docs/(index)/next/add-to-existing-project/mongodb.mdx @@ -6,7 +6,9 @@ metaTitle: Add Prisma Next to an existing MongoDB project metaDescription: Add Prisma Next to an existing MongoDB project. --- -This guide shows how to add Prisma Next to a project that already uses MongoDB. You will initialize Prisma Next, describe the collections you want to work with, emit the generated artifacts, and run a couple of queries. +This guide shows how to add Prisma Next to a project that already uses MongoDB. You will run `prisma-next init`, describe the collections you want to work with, emit the generated artifacts, and run a couple of queries. + +Use this path when you already have an application and database. If you want Prisma Next to create a new app for you, use the [MongoDB quickstart](/next/quickstart/mongodb). :::warning[Prisma Next is still in development] @@ -30,7 +32,7 @@ If your project already runs TypeScript scripts, you can skip this step. Otherwise, install the script tooling: -```npm +```npm title="Terminal" npm install --save-dev tsx typescript ``` @@ -40,10 +42,12 @@ Later, `prisma-next init` will also add the Node.js types it needs and make sure From the root of your existing project, run: -```npm -npx prisma-next init --write-env +```npm title="Terminal" +npx prisma-next init ``` +This is the existing-project path. It adds Prisma Next files and package scripts to the app you already have; it does not scaffold a new framework project. + When Prisma Next asks a few setup questions: - choose `MongoDB` @@ -55,7 +59,7 @@ When Prisma Next asks a few setup questions: Update `.env` with the connection string for the MongoDB deployment your app already uses: ```text title=".env" -DATABASE_URL="mongodb://127.0.0.1:27017/my-app?replicaSet=rs0" +DATABASE_URL="mongodb://127.0.0.1:27017/app?replicaSet=rs0" ``` ## 4. Describe the collections you want Prisma Next to know about @@ -95,7 +99,7 @@ Once the contract looks right, this step turns it into the generated files the r Run: -```npm +```npm title="Terminal" npx prisma-next contract emit ``` @@ -126,7 +130,7 @@ main().catch((error) => { Run it: -```npm +```npm title="Terminal" npx tsx script.ts ``` @@ -162,25 +166,16 @@ main().catch((error) => { Run it again: -```npm +```npm title="Terminal" npx tsx script.ts ``` -## 8. Commands you will use next +## 8. Next steps -Once Prisma Next is in the project, these are the MongoDB commands to remember: +When you change `prisma/contract.prisma`, emit the contract again: -```npm +```npm title="Terminal" npx prisma-next contract emit ``` -Run this after you change `prisma/contract.prisma`. - -```npm -npx prisma-next migration plan --name add-user-bio -npx prisma-next migration apply -``` - -Use these when you want Prisma Next to manage a schema change for the collections in your contract. - -You do not need to create a migration just to start reading collections that already exist. Create a migration when you are ready for Prisma Next to own a change. +You do not need a migration just to read collections that already exist. Use [migration plan](/cli/next/migration-plan) when you want Prisma Next to own a schema change. diff --git a/apps/docs/content/docs/(index)/next/add-to-existing-project/postgresql.mdx b/apps/docs/content/docs/(index)/next/add-to-existing-project/postgresql.mdx index 6db183be5e..0e4cad9547 100644 --- a/apps/docs/content/docs/(index)/next/add-to-existing-project/postgresql.mdx +++ b/apps/docs/content/docs/(index)/next/add-to-existing-project/postgresql.mdx @@ -1,12 +1,14 @@ --- -title: Postgres +title: PostgreSQL description: Add Prisma Next to an existing PostgreSQL project. url: /next/add-to-existing-project/postgresql -metaTitle: Add Prisma Next to an existing Postgres project +metaTitle: Add Prisma Next to an existing PostgreSQL project metaDescription: Add Prisma Next to an existing PostgreSQL project. --- -This guide shows how to add Prisma Next to a project that already uses PostgreSQL. You will initialize Prisma Next, infer a contract from the live schema, sign the database, and run a couple of queries. +This guide shows how to add Prisma Next to a project that already uses PostgreSQL. You will run `prisma-next init`, infer a contract from the live schema, sign the database, and run a couple of queries. + +Use this path when you already have an application and database. If you want Prisma Next to create a new app for you, use the [PostgreSQL quickstart](/next/quickstart/postgresql). :::warning[Prisma Next is still in development] @@ -28,7 +30,7 @@ If your project already runs TypeScript scripts, you can skip this step. Otherwise, install the script tooling: -```npm +```npm title="Terminal" npm install --save-dev tsx typescript ``` @@ -38,10 +40,12 @@ Later, `prisma-next init` will also add the Node.js types it needs and make sure From the root of your existing project, run: -```npm -npx prisma-next init --write-env +```npm title="Terminal" +npx prisma-next init ``` +This is the existing-project path. It adds Prisma Next files and package scripts to the app you already have; it does not scaffold a new framework project. + When Prisma Next asks a few setup questions: - choose `PostgreSQL` @@ -62,7 +66,7 @@ This step gives you a starting contract by reading the schema that already exist Run: -```npm +```npm title="Terminal" npx prisma-next contract infer --output ./prisma/contract.prisma ``` @@ -76,7 +80,7 @@ Once the contract looks right, this step turns it into the generated files the r After you are happy with the contract, run: -```npm +```npm title="Terminal" npx prisma-next contract emit ``` @@ -86,7 +90,7 @@ This refreshes `prisma/contract.json` and `prisma/contract.d.ts` so the runtime Record that the live database matches the emitted contract: -```npm +```npm title="Terminal" npx prisma-next db sign ``` @@ -126,7 +130,7 @@ main().catch((error) => { Run it: -```npm +```npm title="Terminal" npx tsx script.ts ``` @@ -162,29 +166,16 @@ main().catch((error) => { Run it again: -```npm +```npm title="Terminal" npx tsx script.ts ``` -## 9. Commands you will use next +## 9. Next steps -Once Prisma Next is in the project, these are the PostgreSQL commands to remember: +When you change `prisma/contract.prisma`, emit the contract again: -```npm +```npm title="Terminal" npx prisma-next contract emit ``` -Run this after you change `prisma/contract.prisma`. - -```npm -npx prisma-next db update -``` - -Use this when you want Prisma Next to update the live database directly so it matches the latest contract. - -```npm -npx prisma-next migration plan --name add-user-bio -npx prisma-next migration apply -``` - -Use these when you want checked-in migration packages instead of a direct database update. +Use [db update](/cli/next/db-update) for a direct development update, or [migration plan](/cli/next/migration-plan) when you want a checked-in migration. diff --git a/apps/docs/content/docs/(index)/next/create-prisma.mdx b/apps/docs/content/docs/(index)/next/create-prisma.mdx deleted file mode 100644 index 903e92d836..0000000000 --- a/apps/docs/content/docs/(index)/next/create-prisma.mdx +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: create-prisma@next -description: Scaffold a new Prisma Next app with create-prisma@next. -url: /next/create-prisma -metaTitle: Scaffold a Prisma Next app with create-prisma@next -metaDescription: Use create-prisma@next to create a new Prisma Next app with templates, database scripts, and runtime helpers. ---- - -`create-prisma@next` creates a new Prisma Next project from an app template. It installs the Prisma Next packages and adds the files and scripts needed to start developing. - -:::warning[Prisma Next is still in development] - -Prisma Next is not ready for production yet. Prisma ORM 7 is still the recommended choice for production applications today. - -::: - -Use this when you want to start from a working app template. If you already have an app, use [Add Prisma Next to an existing PostgreSQL project](/next/add-to-existing-project/postgresql) or [Add Prisma Next to an existing MongoDB project](/next/add-to-existing-project/mongodb). - -## Create a project - -Run: - -```npm -npx create-prisma@next -``` - -Then choose a project name, app template, database provider, contract authoring style, and package manager. - -Generated Node.js projects expect Node.js 24 LTS or newer. - -## Skip the prompts - -Pass flags when you already know the project shape: - -```npm -npx create-prisma@next --name my-app --template next --provider postgres -``` - -Use `--name .` to create the project in the current directory. - -Useful flags: - -| Flag | What it does | -| --- | --- | -| `--template ` | Chooses the app template. | -| `--provider postgres\|mongodb` | Chooses the database provider. | -| `--authoring psl\|typescript` | Chooses the contract authoring style. | -| `--package-manager ` | Chooses `npm`, `pnpm`, `yarn`, `bun`, or `deno`. | -| `--database-url ` | Writes `DATABASE_URL` during setup. | -| `--no-install` | Scaffolds files without installing dependencies. | -| `--no-emit` | Skips `prisma-next contract emit`. | -| `--force` | Allows scaffolding into a non-empty directory. | - -## What gets created - -The generated project includes Prisma Next dependencies, a contract file, Prisma Next configuration, environment files, and package scripts for local development. - -Supported templates include Hono, Elysia, NestJS, Next.js, SvelteKit, Astro, Nuxt, TanStack Start, and Turborepo. - -## Start the app - -Review `DATABASE_URL` in `.env`, then initialize the database. - -For PostgreSQL: - -```npm -npm run db:init -npm run dev -``` - -For MongoDB: - -```npm -npm run db:up -npm run migration:plan -- --name init -npm run migration:apply -npm run dev -``` - -To add Prisma Next to an app you already have, use the [PostgreSQL existing-project guide](/next/add-to-existing-project/postgresql) or [MongoDB existing-project guide](/next/add-to-existing-project/mongodb). diff --git a/apps/docs/content/docs/(index)/next/index.mdx b/apps/docs/content/docs/(index)/next/index.mdx index 54e4e477d5..d1099d76b0 100644 --- a/apps/docs/content/docs/(index)/next/index.mdx +++ b/apps/docs/content/docs/(index)/next/index.mdx @@ -1,13 +1,13 @@ --- title: Get started with Prisma Next -description: Start a new Prisma Next app or add Prisma Next to an existing project. +description: Start with create-prisma@next, then choose a Prisma Next quickstart or existing-project path. url: /next metaTitle: Get started with Prisma Next -metaDescription: Start a Prisma Next project with create-prisma@next or add Prisma Next to an existing project. +metaDescription: Start with create-prisma@next, then choose a Prisma Next quickstart or existing-project guide. badge: early-access --- -Prisma Next is the next foundation for Prisma ORM. Start here if you want to try the Prisma Next workflow. +Prisma Next is the next foundation for Prisma ORM. If you are trying Prisma Next for the first time, start with `create-prisma@next`. :::warning[Prisma Next is still in development] @@ -15,15 +15,51 @@ Prisma Next is not ready for production yet. Prisma ORM 7 is still the recommend ::: -## Start a new project +## Start here -- [Scaffold a Prisma Next app with create-prisma@next](/next/create-prisma) +Create a new Prisma Next app: -## Add Prisma Next to an existing project +```npm title="Terminal" +npx create-prisma@next +``` -- [Add Prisma Next to an existing PostgreSQL project](/next/add-to-existing-project/postgresql) -- [Add Prisma Next to an existing MongoDB project](/next/add-to-existing-project/mongodb) +Then follow the quickstart for the database you picked: -## Learn the ORM workflow + + }> + Create the app, initialize PostgreSQL, seed data, and run it locally. + + }> + Create the app, migrate MongoDB, seed data, and run it locally. + + -Read the [Prisma Next overview](/orm/next) to learn about contracts, emitted artifacts, runtime clients, query styles, and database change commands. +## Already have an app? + +Already have an app and database? Use `prisma-next init` from your project root. + +```npm title="Terminal" +npx prisma-next init +``` + +The existing-project guides walk through setup for the database your app already uses. + + + }> + Connect Prisma Next to an existing PostgreSQL app and infer a starter contract from the live schema. + + }> + Connect Prisma Next to an existing MongoDB app and model the collections you want to query first. + + + +## Explore + + + }> + Learn the core ideas behind contracts, emitted artifacts, runtime clients, query styles, and database changes. + + }> + Look up command details after you know which workflow you need. + + diff --git a/apps/docs/content/docs/(index)/next/meta.json b/apps/docs/content/docs/(index)/next/meta.json index 022d2ebb44..b773eac732 100644 --- a/apps/docs/content/docs/(index)/next/meta.json +++ b/apps/docs/content/docs/(index)/next/meta.json @@ -5,7 +5,7 @@ "pages": [ "---Getting Started---", "index", - "create-prisma", + "quickstart", "add-to-existing-project" ] } diff --git a/apps/docs/content/docs/(index)/next/quickstart/meta.json b/apps/docs/content/docs/(index)/next/quickstart/meta.json new file mode 100644 index 0000000000..3a7edc76ec --- /dev/null +++ b/apps/docs/content/docs/(index)/next/quickstart/meta.json @@ -0,0 +1,4 @@ +{ + "title": "Quickstart", + "pages": ["postgresql", "mongodb"] +} diff --git a/apps/docs/content/docs/(index)/next/quickstart/mongodb.mdx b/apps/docs/content/docs/(index)/next/quickstart/mongodb.mdx new file mode 100644 index 0000000000..b6461c4890 --- /dev/null +++ b/apps/docs/content/docs/(index)/next/quickstart/mongodb.mdx @@ -0,0 +1,63 @@ +--- +title: MongoDB +description: Create a new Prisma Next project with MongoDB using create-prisma@next. +url: /next/quickstart/mongodb +metaTitle: 'Quickstart: Prisma Next with MongoDB' +metaDescription: Scaffold a Prisma Next project with MongoDB, apply the starter migration, seed data, and run your first query. +--- + +Create a Prisma Next app with MongoDB, seed it, and run your first query. + +:::warning[Prisma Next is still in development] + +Prisma Next is not ready for production yet. Prisma ORM 7 is still the recommended choice for production applications today. + +::: + +## Quick start + +```npm title="Terminal" +npx create-prisma@next +cd +npm run db:up +npm run migration:plan -- --name init +npm run migrate +npm run db:seed +npm run dev +``` + +When prompted, choose MongoDB. If you use MongoDB Atlas or another existing deployment, set `DATABASE_URL` and skip `db:up`. + +## What you need + +You need: + +- Node.js 24 or newer +- npm +- a MongoDB 6.0 or newer deployment, or the generated local setup + +For local development, use a replica set. MongoDB Atlas already provides one, and the generated `db:up` script can start one for you. + +## Check the database connection + +Open `.env` and confirm that `DATABASE_URL` points to the MongoDB deployment you want Prisma Next to use. + +```text title=".env" +DATABASE_URL="mongodb://127.0.0.1:27017/app?replicaSet=rs0" +``` + +If you use MongoDB Atlas, replace this with the connection string from your Atlas cluster. + +## Start MongoDB and migrate + +For the generated local MongoDB setup, `db:up` starts the local replica set. `migration:plan` creates the first migration from the starter schema, and `migrate` applies it. + +## Seed and run the app + +Use the URL or terminal output shown by your template to confirm the sample query runs successfully. You should see the seeded users returned from MongoDB. + +## Next steps + +- Open `src/prisma/contract.prisma` or `src/prisma/contract.ts` and change the starter model. +- Use the [MongoDB existing-project guide](/next/add-to-existing-project/mongodb) if you already have an app and database. +- Read the [Prisma Next overview](/orm/next) when you want the concepts behind contracts, query APIs, and migrations. diff --git a/apps/docs/content/docs/(index)/next/quickstart/postgresql.mdx b/apps/docs/content/docs/(index)/next/quickstart/postgresql.mdx new file mode 100644 index 0000000000..2ceb87cf89 --- /dev/null +++ b/apps/docs/content/docs/(index)/next/quickstart/postgresql.mdx @@ -0,0 +1,61 @@ +--- +title: PostgreSQL +description: Create a new Prisma Next project with PostgreSQL using create-prisma@next. +url: /next/quickstart/postgresql +metaTitle: 'Quickstart: Prisma Next with PostgreSQL' +metaDescription: Scaffold a Prisma Next project with PostgreSQL, initialize the database, seed data, and run your first query. +--- + +Create a Prisma Next app with PostgreSQL, seed it, and run your first query. + +:::warning[Prisma Next is still in development] + +Prisma Next is not ready for production yet. Prisma ORM 7 is still the recommended choice for production applications today. + +::: + +## Quick start + +```npm title="Terminal" +npx create-prisma@next +cd +npm run db:init +npm run db:seed +npm run dev +``` + +When prompted, choose PostgreSQL. Pick Prisma Postgres if you want setup to create the database for you, or paste your own `DATABASE_URL`. + +## What you need + +You need: + +- Node.js 24 or newer +- npm +- a PostgreSQL database, or Prisma Postgres from the setup prompt + +If you use your own database, keep the connection string ready before you start. + +## Check the database connection + +Open `.env` and confirm that `DATABASE_URL` points to the PostgreSQL database you want Prisma Next to use. + +```text title=".env" +DATABASE_URL="postgresql://username:password@host:5432/database?sslmode=require" +``` + +If you chose Prisma Postgres during setup, this value is already written for you. If you pasted your own connection string, keep it in `.env` and do not hardcode it in application code. + +## Initialize and seed + +`db:init` applies the starter schema to PostgreSQL. `db:seed` inserts sample users so the first query has data to show. + +## Run the app + +Use the URL or terminal output shown by your template to confirm the sample query runs successfully. You should see the seeded users returned from PostgreSQL. + +## Next steps + +- Open `src/prisma/contract.prisma` or `src/prisma/contract.ts` and change the starter model. +- Use the [PostgreSQL existing-project guide](/next/add-to-existing-project/postgresql) if you already have an app and database. +- Read the [Prisma Next overview](/orm/next) when you want the concepts behind contracts, query APIs, and migrations. diff --git a/apps/docs/content/docs/cli/next/index.mdx b/apps/docs/content/docs/cli/next/index.mdx index bcd24d33db..4e3b23dc33 100644 --- a/apps/docs/content/docs/cli/next/index.mdx +++ b/apps/docs/content/docs/cli/next/index.mdx @@ -28,7 +28,7 @@ npx prisma-next help npx prisma-next contract emit ``` -For a full app scaffold, use [`create-prisma@next`](/next/create-prisma). That path creates the project files and package scripts for you. This CLI reference is for the lower-level commands those scripts call. +For a full app scaffold, use a [Prisma Next quickstart](/next/quickstart/postgresql). That path creates the project files and package scripts for you. This CLI reference is for the lower-level commands those scripts call. ## Common workflows diff --git a/apps/docs/content/docs/cli/next/init.mdx b/apps/docs/content/docs/cli/next/init.mdx index 07f76eb742..66db8e2de1 100644 --- a/apps/docs/content/docs/cli/next/init.mdx +++ b/apps/docs/content/docs/cli/next/init.mdx @@ -8,7 +8,7 @@ metaDescription: Learn how to initialize Prisma Next files in an existing projec `prisma-next init` scaffolds the Prisma Next config, contract source, and runtime files inside an existing project. -Use [`create-prisma@next`](/next/create-prisma) when you want a complete new application template. Use `prisma-next init` when you already have a project and want to add the lower-level Prisma Next files. +Use a [Prisma Next quickstart](/next/quickstart/postgresql) when you want a complete new application template. Use `prisma-next init` when you already have a project and want to add the lower-level Prisma Next files. ## Usage diff --git a/apps/docs/content/docs/orm/next/index.mdx b/apps/docs/content/docs/orm/next/index.mdx index c4846f5b6c..e5fade2ac2 100644 --- a/apps/docs/content/docs/orm/next/index.mdx +++ b/apps/docs/content/docs/orm/next/index.mdx @@ -56,7 +56,7 @@ Database changes build on the same contract. You can initialize or reconcile a d ## Start with the right section -Use [Getting Started](/next) when you want setup instructions, including [`create-prisma@next`](/next/create-prisma). `create-prisma@next` scaffolds a complete application template and adds package scripts for contract emission, database initialization, verification, and migrations. +Use [Getting Started](/next) when you want setup instructions. The quickstart guides use `create-prisma@next` to scaffold a complete application template and add package scripts for contract emission, database initialization, verification, and migrations. Stay in this ORM section when you want to understand the Prisma Next model: diff --git a/apps/docs/next.config.mjs b/apps/docs/next.config.mjs index f89ccb2b99..79663cf824 100644 --- a/apps/docs/next.config.mjs +++ b/apps/docs/next.config.mjs @@ -260,22 +260,22 @@ const config = { }, { source: "/orm/next/create-prisma", - destination: "/next/create-prisma", + destination: "/next", permanent: false, }, { - source: "/next/quickstart", - destination: "/next/create-prisma", + source: "/next/create-prisma", + destination: "/next", permanent: false, }, { - source: "/next/quickstart/:path*", - destination: "/next/create-prisma", + source: "/next/quickstart", + destination: "/next/quickstart/postgresql", permanent: false, }, { source: "/orm/next/quickstart/:path*", - destination: "/next/create-prisma", + destination: "/next/quickstart/:path*", permanent: false, }, { diff --git a/apps/docs/src/lib/version.ts b/apps/docs/src/lib/version.ts index a94852ded0..3244aa915a 100644 --- a/apps/docs/src/lib/version.ts +++ b/apps/docs/src/lib/version.ts @@ -24,14 +24,15 @@ const NEXT_GETTING_STARTED_PATHS_BY_LATEST_PATH = new Map([ ["/", NEXT_GETTING_STARTED_ROOT], ["/getting-started", NEXT_GETTING_STARTED_ROOT], ["/prisma-orm", NEXT_GETTING_STARTED_ROOT], - ["/prisma-orm/quickstart/postgresql", "/next/create-prisma"], - ["/prisma-orm/quickstart/mongodb", "/next/create-prisma"], + ["/prisma-orm/quickstart/postgresql", "/next/quickstart/postgresql"], + ["/prisma-orm/quickstart/mongodb", "/next/quickstart/mongodb"], ["/prisma-orm/add-to-existing-project/postgresql", "/next/add-to-existing-project/postgresql"], ["/prisma-orm/add-to-existing-project/mongodb", "/next/add-to-existing-project/mongodb"], ]); const LATEST_GETTING_STARTED_PATHS_BY_NEXT_PATH = new Map([ [NEXT_GETTING_STARTED_ROOT, "/"], - ["/next/create-prisma", "/"], + ["/next/quickstart/postgresql", "/prisma-orm/quickstart/postgresql"], + ["/next/quickstart/mongodb", "/prisma-orm/quickstart/mongodb"], ["/next/add-to-existing-project/postgresql", "/prisma-orm/add-to-existing-project/postgresql"], ["/next/add-to-existing-project/mongodb", "/prisma-orm/add-to-existing-project/mongodb"], ]); From f61564d2773e7a9ab1b92ff59c697f7a14c48d02 Mon Sep 17 00:00:00 2001 From: Aman Varshney Date: Thu, 4 Jun 2026 16:54:31 +0530 Subject: [PATCH 2/3] docs: address Prisma Next getting started feedback --- .../docs/(index)/next/quickstart/mongodb.mdx | 14 +++++++------- .../docs/(index)/next/quickstart/postgresql.mdx | 8 ++++---- apps/docs/content/docs/orm/index.mdx | 6 ++++++ 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/apps/docs/content/docs/(index)/next/quickstart/mongodb.mdx b/apps/docs/content/docs/(index)/next/quickstart/mongodb.mdx index b6461c4890..bfbd328c37 100644 --- a/apps/docs/content/docs/(index)/next/quickstart/mongodb.mdx +++ b/apps/docs/content/docs/(index)/next/quickstart/mongodb.mdx @@ -26,19 +26,19 @@ npm run db:seed npm run dev ``` -When prompted, choose MongoDB. If you use MongoDB Atlas or another existing deployment, set `DATABASE_URL` and skip `db:up`. +When prompted, choose MongoDB. The generated local setup gives you a MongoDB replica set through `db:up`; if you use MongoDB Atlas or another existing deployment, set `DATABASE_URL` and skip `db:up`. -## What you need +## Prerequisites You need: - Node.js 24 or newer - npm -- a MongoDB 6.0 or newer deployment, or the generated local setup +- the generated local MongoDB setup, or a MongoDB 6.0 or newer deployment -For local development, use a replica set. MongoDB Atlas already provides one, and the generated `db:up` script can start one for you. +For local development, use a replica set. MongoDB Atlas already provides one, and the generated `db:up` script starts one for you. -## Check the database connection +## 1. Check the database connection Open `.env` and confirm that `DATABASE_URL` points to the MongoDB deployment you want Prisma Next to use. @@ -48,11 +48,11 @@ DATABASE_URL="mongodb://127.0.0.1:27017/app?replicaSet=rs0" If you use MongoDB Atlas, replace this with the connection string from your Atlas cluster. -## Start MongoDB and migrate +## 2. Start MongoDB and migrate For the generated local MongoDB setup, `db:up` starts the local replica set. `migration:plan` creates the first migration from the starter schema, and `migrate` applies it. -## Seed and run the app +## 3. Seed and run the app Use the URL or terminal output shown by your template to confirm the sample query runs successfully. You should see the seeded users returned from MongoDB. diff --git a/apps/docs/content/docs/(index)/next/quickstart/postgresql.mdx b/apps/docs/content/docs/(index)/next/quickstart/postgresql.mdx index 2ceb87cf89..f69fc30ea0 100644 --- a/apps/docs/content/docs/(index)/next/quickstart/postgresql.mdx +++ b/apps/docs/content/docs/(index)/next/quickstart/postgresql.mdx @@ -26,7 +26,7 @@ npm run dev When prompted, choose PostgreSQL. Pick Prisma Postgres if you want setup to create the database for you, or paste your own `DATABASE_URL`. -## What you need +## Prerequisites You need: @@ -36,7 +36,7 @@ You need: If you use your own database, keep the connection string ready before you start. -## Check the database connection +## 1. Check the database connection Open `.env` and confirm that `DATABASE_URL` points to the PostgreSQL database you want Prisma Next to use. @@ -46,11 +46,11 @@ DATABASE_URL="postgresql://username:password@host:5432/database?sslmode=require" If you chose Prisma Postgres during setup, this value is already written for you. If you pasted your own connection string, keep it in `.env` and do not hardcode it in application code. -## Initialize and seed +## 2. Initialize and seed `db:init` applies the starter schema to PostgreSQL. `db:seed` inserts sample users so the first query has data to show. -## Run the app +## 3. Run the app Use the URL or terminal output shown by your template to confirm the sample query runs successfully. You should see the seeded users returned from PostgreSQL. diff --git a/apps/docs/content/docs/orm/index.mdx b/apps/docs/content/docs/orm/index.mdx index 893e6c8c62..37710f64fe 100644 --- a/apps/docs/content/docs/orm/index.mdx +++ b/apps/docs/content/docs/orm/index.mdx @@ -14,6 +14,12 @@ Prisma ORM is [open-source](https://github.com/prisma/prisma) and consists of: Prisma Client works with any Node.js or TypeScript backend, whether you're deploying to traditional servers, serverless functions, or microservices. +:::tip[Try Prisma Next] + +Prisma Next is available in early access and is the path toward the next major version of Prisma ORM. Start with the [Prisma Next getting started guide](/next) and share feedback in [Discord](https://pris.ly/discord?utm_source=docs&utm_medium=inline_text). + +::: + ## Why Prisma ORM Traditional database tools force a tradeoff between **productivity** and **control**. Raw SQL gives full control but is error-prone and lacks type safety. Traditional ORMs improve productivity but abstract too much, leading to the [object-relational impedance mismatch](https://en.wikipedia.org/wiki/Object-relational_impedance_mismatch) and performance pitfalls like the n+1 problem. From eec325f250481cf4b06314c9727241b126d17989 Mon Sep 17 00:00:00 2001 From: Aman Varshney Date: Thu, 4 Jun 2026 20:00:25 +0530 Subject: [PATCH 3/3] docs: add Prisma Next getting started section --- .../next/add-to-existing-project/mongodb.mdx | 12 +- .../add-to-existing-project/postgresql.mdx | 16 +- .../docs/(index)/next/getting-started.mdx | 61 +++++++ apps/docs/content/docs/(index)/next/index.mdx | 55 +++--- apps/docs/content/docs/(index)/next/meta.json | 8 +- .../next/prisma-postgres/from-the-cli.mdx | 42 +++++ .../import-from-existing-database-mysql.mdx | 71 ++++++++ ...port-from-existing-database-postgresql.mdx | 61 +++++++ .../(index)/next/prisma-postgres/meta.json | 9 + .../next/prisma-postgres/quickstart/meta.json | 4 + .../quickstart/prisma-next.mdx | 48 ++++++ .../docs/(index)/next/quickstart/mongodb.mdx | 2 +- .../(index)/next/quickstart/postgresql.mdx | 2 +- apps/docs/next.config.mjs | 9 +- apps/docs/src/app/global.css | 156 ++++++++++++++++++ apps/docs/src/app/layout.tsx | 8 +- .../src/components/sidebar-badge-provider.tsx | 24 ++- apps/docs/src/lib/version.ts | 24 ++- apps/docs/src/lib/versioned-sidebar-tree.ts | 7 +- 19 files changed, 560 insertions(+), 59 deletions(-) create mode 100644 apps/docs/content/docs/(index)/next/getting-started.mdx create mode 100644 apps/docs/content/docs/(index)/next/prisma-postgres/from-the-cli.mdx create mode 100644 apps/docs/content/docs/(index)/next/prisma-postgres/import-from-existing-database-mysql.mdx create mode 100644 apps/docs/content/docs/(index)/next/prisma-postgres/import-from-existing-database-postgresql.mdx create mode 100644 apps/docs/content/docs/(index)/next/prisma-postgres/meta.json create mode 100644 apps/docs/content/docs/(index)/next/prisma-postgres/quickstart/meta.json create mode 100644 apps/docs/content/docs/(index)/next/prisma-postgres/quickstart/prisma-next.mdx diff --git a/apps/docs/content/docs/(index)/next/add-to-existing-project/mongodb.mdx b/apps/docs/content/docs/(index)/next/add-to-existing-project/mongodb.mdx index 86f158401d..3c0bb1a7e7 100644 --- a/apps/docs/content/docs/(index)/next/add-to-existing-project/mongodb.mdx +++ b/apps/docs/content/docs/(index)/next/add-to-existing-project/mongodb.mdx @@ -32,7 +32,7 @@ If your project already runs TypeScript scripts, you can skip this step. Otherwise, install the script tooling: -```npm title="Terminal" +```npm npm install --save-dev tsx typescript ``` @@ -42,7 +42,7 @@ Later, `prisma-next init` will also add the Node.js types it needs and make sure From the root of your existing project, run: -```npm title="Terminal" +```npm npx prisma-next init ``` @@ -99,7 +99,7 @@ Once the contract looks right, this step turns it into the generated files the r Run: -```npm title="Terminal" +```npm npx prisma-next contract emit ``` @@ -130,7 +130,7 @@ main().catch((error) => { Run it: -```npm title="Terminal" +```npm npx tsx script.ts ``` @@ -166,7 +166,7 @@ main().catch((error) => { Run it again: -```npm title="Terminal" +```npm npx tsx script.ts ``` @@ -174,7 +174,7 @@ npx tsx script.ts When you change `prisma/contract.prisma`, emit the contract again: -```npm title="Terminal" +```npm npx prisma-next contract emit ``` diff --git a/apps/docs/content/docs/(index)/next/add-to-existing-project/postgresql.mdx b/apps/docs/content/docs/(index)/next/add-to-existing-project/postgresql.mdx index 0e4cad9547..5f97853110 100644 --- a/apps/docs/content/docs/(index)/next/add-to-existing-project/postgresql.mdx +++ b/apps/docs/content/docs/(index)/next/add-to-existing-project/postgresql.mdx @@ -30,7 +30,7 @@ If your project already runs TypeScript scripts, you can skip this step. Otherwise, install the script tooling: -```npm title="Terminal" +```npm npm install --save-dev tsx typescript ``` @@ -40,7 +40,7 @@ Later, `prisma-next init` will also add the Node.js types it needs and make sure From the root of your existing project, run: -```npm title="Terminal" +```npm npx prisma-next init ``` @@ -66,7 +66,7 @@ This step gives you a starting contract by reading the schema that already exist Run: -```npm title="Terminal" +```npm npx prisma-next contract infer --output ./prisma/contract.prisma ``` @@ -80,7 +80,7 @@ Once the contract looks right, this step turns it into the generated files the r After you are happy with the contract, run: -```npm title="Terminal" +```npm npx prisma-next contract emit ``` @@ -90,7 +90,7 @@ This refreshes `prisma/contract.json` and `prisma/contract.d.ts` so the runtime Record that the live database matches the emitted contract: -```npm title="Terminal" +```npm npx prisma-next db sign ``` @@ -130,7 +130,7 @@ main().catch((error) => { Run it: -```npm title="Terminal" +```npm npx tsx script.ts ``` @@ -166,7 +166,7 @@ main().catch((error) => { Run it again: -```npm title="Terminal" +```npm npx tsx script.ts ``` @@ -174,7 +174,7 @@ npx tsx script.ts When you change `prisma/contract.prisma`, emit the contract again: -```npm title="Terminal" +```npm npx prisma-next contract emit ``` diff --git a/apps/docs/content/docs/(index)/next/getting-started.mdx b/apps/docs/content/docs/(index)/next/getting-started.mdx new file mode 100644 index 0000000000..12815ca885 --- /dev/null +++ b/apps/docs/content/docs/(index)/next/getting-started.mdx @@ -0,0 +1,61 @@ +--- +title: Choose a setup path +description: Choose the fastest path to try Prisma Next in a new or existing project. +url: /next/getting-started +metaTitle: Prisma Next getting started +metaDescription: Choose a Prisma Next quickstart for a new project or add Prisma Next to an existing app. +badge: early-access +--- + +Start with a quickstart if you want Prisma Next to create the app. Use the existing-project path if you already have an app and database. + +## Start a new project + +```npm +npx create-prisma@next +``` + + + }> + Create the app, choose PostgreSQL, initialize the database, seed data, and run the first query. + + }> + Create the app, choose MongoDB, start or connect to MongoDB, seed data, and run the first query. + + + +## Use Prisma Postgres + +```npm +npx create-prisma@next +``` + + + }> + Create a Prisma Next app and let setup provision Prisma Postgres for the first run. + + }> + Start from the command line when you want the Prisma Postgres path without browsing Console first. + + + +## Add to an existing project + +```npm +npx prisma-next init +``` + + + }> + Add Prisma Next to an existing PostgreSQL app and infer a starter contract from the live schema. + + }> + Add Prisma Next to an existing MongoDB app and model the collections you want to query first. + + + +## After setup + +- Use the generated app scripts for the first run. +- Change the starter contract when you are ready to model your own data. +- Open the [Prisma Next overview](/orm/next) when you want the concepts behind the setup. diff --git a/apps/docs/content/docs/(index)/next/index.mdx b/apps/docs/content/docs/(index)/next/index.mdx index d1099d76b0..c947211459 100644 --- a/apps/docs/content/docs/(index)/next/index.mdx +++ b/apps/docs/content/docs/(index)/next/index.mdx @@ -1,13 +1,13 @@ --- -title: Get started with Prisma Next -description: Start with create-prisma@next, then choose a Prisma Next quickstart or existing-project path. +title: Introduction to Prisma Next +description: Prisma Next is the next foundation for Prisma ORM. url: /next -metaTitle: Get started with Prisma Next -metaDescription: Start with create-prisma@next, then choose a Prisma Next quickstart or existing-project guide. +metaTitle: Introduction to Prisma Next +metaDescription: Prisma Next is the next foundation for Prisma ORM. badge: early-access --- -Prisma Next is the next foundation for Prisma ORM. If you are trying Prisma Next for the first time, start with `create-prisma@next`. +Prisma Next is the next foundation for Prisma ORM. It is an early access version of the ORM runtime, query APIs, migration flow, and project setup. :::warning[Prisma Next is still in development] @@ -15,51 +15,44 @@ Prisma Next is not ready for production yet. Prisma ORM 7 is still the recommend ::: -## Start here +Use Prisma Next when you want to try the new developer experience before it becomes the default Prisma ORM path. -Create a new Prisma Next app: - -```npm title="Terminal" +```npm npx create-prisma@next ``` -Then follow the quickstart for the database you picked: +Start with the setup page when you want a guided first run. - }> - Create the app, initialize PostgreSQL, seed data, and run it locally. - - }> - Create the app, migrate MongoDB, seed data, and run it locally. + }> + Pick a new-project quickstart or add Prisma Next to an existing app. -## Already have an app? - -Already have an app and database? Use `prisma-next init` from your project root. - -```npm title="Terminal" -npx prisma-next init -``` - -The existing-project guides walk through setup for the database your app already uses. +## What you can try + }> + Create a Prisma Next app, initialize the database, seed data, and run the first query. + + }> + Create a Prisma Next app with a local MongoDB replica set or your own MongoDB deployment. + }> - Connect Prisma Next to an existing PostgreSQL app and infer a starter contract from the live schema. + Add Prisma Next to an existing PostgreSQL app with `prisma-next init`. }> - Connect Prisma Next to an existing MongoDB app and model the collections you want to query first. + Add Prisma Next to an existing MongoDB app and model the collections you want to query first. + + }> + Create a Prisma Next app backed by Prisma Postgres. -## Explore +## Learn the concepts }> - Learn the core ideas behind contracts, emitted artifacts, runtime clients, query styles, and database changes. - - }> - Look up command details after you know which workflow you need. + Learn the core ideas behind contracts, emitted artifacts, runtime clients, query styles, and migrations. diff --git a/apps/docs/content/docs/(index)/next/meta.json b/apps/docs/content/docs/(index)/next/meta.json index b773eac732..852e032cf4 100644 --- a/apps/docs/content/docs/(index)/next/meta.json +++ b/apps/docs/content/docs/(index)/next/meta.json @@ -1,11 +1,15 @@ { - "title": "Next", + "title": "Prisma Next", "defaultOpen": true, "root": true, "pages": [ "---Getting Started---", "index", + "getting-started", + "---Prisma ORM---", "quickstart", - "add-to-existing-project" + "add-to-existing-project", + "---Prisma Postgres---", + "...prisma-postgres" ] } diff --git a/apps/docs/content/docs/(index)/next/prisma-postgres/from-the-cli.mdx b/apps/docs/content/docs/(index)/next/prisma-postgres/from-the-cli.mdx new file mode 100644 index 0000000000..3a041cffac --- /dev/null +++ b/apps/docs/content/docs/(index)/next/prisma-postgres/from-the-cli.mdx @@ -0,0 +1,42 @@ +--- +title: From the CLI +description: Start a Prisma Next app with Prisma Postgres from the command line. +url: /next/prisma-postgres/from-the-cli +metaTitle: Prisma Next with Prisma Postgres from the CLI +metaDescription: Start a Prisma Next app with Prisma Postgres from the command line. +badge: early-access +--- + +Use the CLI when you want Prisma Next and Prisma Postgres set up without leaving the terminal. + +## Start a new app + +```npm +npx create-prisma@next +``` + +Choose PostgreSQL and Prisma Postgres when prompted. + +Then run the generated scripts: + +```npm +cd +npm run db:init +npm run db:seed +npm run dev +``` + +## Add Prisma Next to an existing app + +If the app already exists, run Prisma Next from the project root: + +```npm +npx prisma-next init +``` + +Choose PostgreSQL, set `DATABASE_URL` to your Prisma Postgres connection string, then follow the [PostgreSQL existing-project guide](/next/add-to-existing-project/postgresql). + +## Import an existing database + +- Use [Import from PostgreSQL](/next/prisma-postgres/import-from-existing-database-postgresql) when your source database is PostgreSQL. +- Use [Import from MySQL](/next/prisma-postgres/import-from-existing-database-mysql) when your source database is MySQL. diff --git a/apps/docs/content/docs/(index)/next/prisma-postgres/import-from-existing-database-mysql.mdx b/apps/docs/content/docs/(index)/next/prisma-postgres/import-from-existing-database-mysql.mdx new file mode 100644 index 0000000000..f98417e5c6 --- /dev/null +++ b/apps/docs/content/docs/(index)/next/prisma-postgres/import-from-existing-database-mysql.mdx @@ -0,0 +1,71 @@ +--- +title: Import from MySQL +description: Import an existing MySQL database into Prisma Postgres, then use it with Prisma Next. +url: /next/prisma-postgres/import-from-existing-database-mysql +metaTitle: Import from MySQL into Prisma Postgres for Prisma Next +metaDescription: Import MySQL data into Prisma Postgres, then connect Prisma Next to the imported database. +badge: early-access +--- + +Move an existing MySQL database into Prisma Postgres, then connect Prisma Next to it. + +## Prerequisites + +You need: + +- the connection URL for the MySQL database you are importing from +- a Prisma Data Platform account +- `pgloader` +- Node.js 24 or newer + +## 1. Create a Prisma Postgres database + +Create a Prisma Postgres database from Console or with the CLI. Copy the direct connection string; you will use it for the import and for `DATABASE_URL`. + +## 2. Create a pgloader config + +Create `config.load`: + +```text title="config.load" +LOAD DATABASE + FROM mysql://USER:PASSWORD@HOST:PORT/DATABASE + INTO postgres://USER:PASSWORD@db.prisma.io:5432/?sslmode=require + +WITH quote identifiers, + include drop, + create tables, + create indexes, + reset sequences + +ALTER SCHEMA 'DATABASE' RENAME TO 'public'; +``` + +## 3. Import into Prisma Postgres + +Run pgloader: + +```shell +pgloader config.load +``` + +## 4. Add Prisma Next + +From your app root, initialize Prisma Next: + +```npm +npx prisma-next init +``` + +Choose PostgreSQL, set `DATABASE_URL` to the Prisma Postgres connection string, then infer and emit the contract: + +```npm +npx prisma-next contract infer --output ./prisma/contract.prisma +npx prisma-next contract emit +npx prisma-next db sign +``` + +## Next steps + +- Review table and column names in the inferred contract. +- Use the [PostgreSQL existing-project guide](/next/add-to-existing-project/postgresql) for the first Prisma Next query. +- Use the [full Prisma Postgres MySQL import guide](/prisma-postgres/import-from-existing-database-mysql) for deeper migration details. diff --git a/apps/docs/content/docs/(index)/next/prisma-postgres/import-from-existing-database-postgresql.mdx b/apps/docs/content/docs/(index)/next/prisma-postgres/import-from-existing-database-postgresql.mdx new file mode 100644 index 0000000000..dea8eb60fa --- /dev/null +++ b/apps/docs/content/docs/(index)/next/prisma-postgres/import-from-existing-database-postgresql.mdx @@ -0,0 +1,61 @@ +--- +title: Import from PostgreSQL +description: Import an existing PostgreSQL database into Prisma Postgres, then use it with Prisma Next. +url: /next/prisma-postgres/import-from-existing-database-postgresql +metaTitle: Import from PostgreSQL into Prisma Postgres for Prisma Next +metaDescription: Import PostgreSQL data into Prisma Postgres, then connect Prisma Next to the imported database. +badge: early-access +--- + +Move an existing PostgreSQL database into Prisma Postgres, then connect Prisma Next to it. + +## Prerequisites + +You need: + +- the connection URL for the PostgreSQL database you are importing from +- a Prisma Data Platform account +- PostgreSQL 17 CLI tools, including `pg_dump` and `pg_restore` +- Node.js 24 or newer + +## 1. Create a Prisma Postgres database + +Create a Prisma Postgres database from Console or with the CLI. Copy the direct connection string; you will use it for the restore and for `DATABASE_URL`. + +## 2. Export from PostgreSQL + +Run `pg_dump` against the source database: + +```shell +pg_dump -Fc -v -d "postgresql://USER:PASSWORD@HOST:PORT/DATABASE" -n public -f db_dump.bak +``` + +## 3. Restore into Prisma Postgres + +Restore the dump with the direct Prisma Postgres connection string: + +```shell +pg_restore -d "postgres://USER:PASSWORD@db.prisma.io:5432/postgres?sslmode=require" -v ./db_dump.bak +``` + +## 4. Add Prisma Next + +From your app root, initialize Prisma Next: + +```npm +npx prisma-next init +``` + +Choose PostgreSQL, set `DATABASE_URL` to the Prisma Postgres connection string, then infer and emit the contract: + +```npm +npx prisma-next contract infer --output ./prisma/contract.prisma +npx prisma-next contract emit +npx prisma-next db sign +``` + +## Next steps + +- Review the inferred contract before you rely on it in application code. +- Use the [PostgreSQL existing-project guide](/next/add-to-existing-project/postgresql) for the first Prisma Next query. +- Use the [full Prisma Postgres import guide](/prisma-postgres/import-from-existing-database-postgresql) for deeper migration details. diff --git a/apps/docs/content/docs/(index)/next/prisma-postgres/meta.json b/apps/docs/content/docs/(index)/next/prisma-postgres/meta.json new file mode 100644 index 0000000000..5201852397 --- /dev/null +++ b/apps/docs/content/docs/(index)/next/prisma-postgres/meta.json @@ -0,0 +1,9 @@ +{ + "title": "Prisma Postgres", + "pages": [ + "quickstart", + "import-from-existing-database-postgresql", + "import-from-existing-database-mysql", + "from-the-cli" + ] +} diff --git a/apps/docs/content/docs/(index)/next/prisma-postgres/quickstart/meta.json b/apps/docs/content/docs/(index)/next/prisma-postgres/quickstart/meta.json new file mode 100644 index 0000000000..1ac4f6124b --- /dev/null +++ b/apps/docs/content/docs/(index)/next/prisma-postgres/quickstart/meta.json @@ -0,0 +1,4 @@ +{ + "title": "Quickstart", + "pages": ["prisma-next"] +} diff --git a/apps/docs/content/docs/(index)/next/prisma-postgres/quickstart/prisma-next.mdx b/apps/docs/content/docs/(index)/next/prisma-postgres/quickstart/prisma-next.mdx new file mode 100644 index 0000000000..ec86467a31 --- /dev/null +++ b/apps/docs/content/docs/(index)/next/prisma-postgres/quickstart/prisma-next.mdx @@ -0,0 +1,48 @@ +--- +title: Prisma Next +description: Create a Prisma Next app with Prisma Postgres. +url: /next/prisma-postgres/quickstart/prisma-next +metaTitle: 'Quickstart: Prisma Next with Prisma Postgres' +metaDescription: Create a Prisma Next app, provision Prisma Postgres, seed data, and run your first query. +badge: early-access +--- + +Create a Prisma Next app backed by Prisma Postgres. + +## Quick start + +```npm +npx create-prisma@next +cd +npm run db:init +npm run db:seed +npm run dev +``` + +When prompted, choose PostgreSQL and Prisma Postgres. Setup provisions the database, writes `DATABASE_URL`, and adds the scripts used for the first run. + +## Prerequisites + +You need: + +- Node.js 24 or newer +- npm +- a Prisma Data Platform account + +## 1. Create the app + +Run `create-prisma@next` and choose the minimal template if you want the fastest first run. Choose a framework template when you want the first query wired into an app route or page. + +## 2. Initialize and seed + +`db:init` applies the starter schema to Prisma Postgres. `db:seed` inserts sample data so the first query returns something immediately. + +## 3. Run the app + +Use the URL or terminal output shown by your template to confirm the sample query runs successfully. + +## Next steps + +- Open the generated contract and change the starter model. +- Use [Import from PostgreSQL](/next/prisma-postgres/import-from-existing-database-postgresql) or [Import from MySQL](/next/prisma-postgres/import-from-existing-database-mysql) when you want to move an existing database to Prisma Postgres. +- Use the [PostgreSQL existing-project guide](/next/add-to-existing-project/postgresql) when your app already has a Prisma Postgres database. diff --git a/apps/docs/content/docs/(index)/next/quickstart/mongodb.mdx b/apps/docs/content/docs/(index)/next/quickstart/mongodb.mdx index bfbd328c37..c6ecde9b0e 100644 --- a/apps/docs/content/docs/(index)/next/quickstart/mongodb.mdx +++ b/apps/docs/content/docs/(index)/next/quickstart/mongodb.mdx @@ -16,7 +16,7 @@ Prisma Next is not ready for production yet. Prisma ORM 7 is still the recommend ## Quick start -```npm title="Terminal" +```npm npx create-prisma@next cd npm run db:up diff --git a/apps/docs/content/docs/(index)/next/quickstart/postgresql.mdx b/apps/docs/content/docs/(index)/next/quickstart/postgresql.mdx index f69fc30ea0..79500cc5cb 100644 --- a/apps/docs/content/docs/(index)/next/quickstart/postgresql.mdx +++ b/apps/docs/content/docs/(index)/next/quickstart/postgresql.mdx @@ -16,7 +16,7 @@ Prisma Next is not ready for production yet. Prisma ORM 7 is still the recommend ## Quick start -```npm title="Terminal" +```npm npx create-prisma@next cd npm run db:init diff --git a/apps/docs/next.config.mjs b/apps/docs/next.config.mjs index 79663cf824..82e2d4f01f 100644 --- a/apps/docs/next.config.mjs +++ b/apps/docs/next.config.mjs @@ -260,12 +260,12 @@ const config = { }, { source: "/orm/next/create-prisma", - destination: "/next", + destination: "/next/getting-started", permanent: false, }, { source: "/next/create-prisma", - destination: "/next", + destination: "/next/getting-started", permanent: false, }, { @@ -273,6 +273,11 @@ const config = { destination: "/next/quickstart/postgresql", permanent: false, }, + { + source: "/next/prisma-postgres/quickstart", + destination: "/next/prisma-postgres/quickstart/prisma-next", + permanent: false, + }, { source: "/orm/next/quickstart/:path*", destination: "/next/quickstart/:path*", diff --git a/apps/docs/src/app/global.css b/apps/docs/src/app/global.css index 41692a91ba..59639b90e3 100644 --- a/apps/docs/src/app/global.css +++ b/apps/docs/src/app/global.css @@ -29,6 +29,162 @@ header &[data-search-full] { visibility: hidden !important; } +#prisma-next-docs.prisma-next-banner { + isolation: isolate; + overflow: hidden; + color: #f8fffd; + border-bottom: 1px solid color-mix(in oklab, #00ccb4 45%, #6385ff); + background: + linear-gradient(100deg, rgba(0, 204, 180, 0.32), transparent 28%), + linear-gradient(260deg, rgba(255, 188, 63, 0.28), transparent 30%), + linear-gradient(90deg, #061615 0%, #101936 36%, #25152d 68%, #081816 100%), + repeating-linear-gradient( + 115deg, + rgba(255, 255, 255, 0.14) 0, + rgba(255, 255, 255, 0.14) 1px, + transparent 1px, + transparent 18px + ); + background-position: + 0% 50%, + 100% 50%, + 0% 50%, + 0 0; + background-size: + 150% 100%, + 150% 100%, + 220% 100%, + 48px 48px; + box-shadow: + 0 8px 32px rgba(0, 204, 180, 0.16), + inset 0 1px 0 rgba(255, 255, 255, 0.12), + inset 0 -1px 0 rgba(0, 0, 0, 0.32); + animation: prisma-next-banner-flow 16s ease-in-out infinite alternate; +} + +#prisma-next-docs.prisma-next-banner::before, +#prisma-next-docs.prisma-next-banner::after { + content: ""; + position: absolute; + inset: 0; + pointer-events: none; +} + +#prisma-next-docs.prisma-next-banner::before { + background: + linear-gradient( + 90deg, + transparent 0%, + rgba(0, 204, 180, 0.28) 18%, + rgba(99, 133, 255, 0.44) 38%, + rgba(255, 188, 63, 0.4) 56%, + rgba(255, 111, 145, 0.28) 74%, + transparent 100% + ), + linear-gradient(90deg, #00ccb4, #6385ff 34%, #ffbc3f 68%, #ff6f91); + background-position: + -42rem 0, + 0 0; + background-repeat: no-repeat; + background-size: + 42rem 100%, + 100% 2px; + animation: prisma-next-banner-sweep 8s ease-in-out infinite; +} + +#prisma-next-docs.prisma-next-banner::after { + opacity: 0.48; + background: + linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent), + repeating-linear-gradient( + 135deg, + transparent 0, + transparent 16px, + rgba(255, 255, 255, 0.16) 16px, + rgba(255, 255, 255, 0.16) 17px + ); + background-position: + -30% 0, + 0 0; + background-size: + 24rem 100%, + 32px 32px; + mix-blend-mode: screen; + animation: prisma-next-banner-grid 20s linear infinite; +} + +#prisma-next-docs .prisma-next-banner-content { + position: relative; + z-index: 1; +} + +#prisma-next-docs .prisma-next-banner-cta { + display: inline-flex; + align-items: center; + gap: 4px; + border-color: color-mix(in oklab, #00ccb4 48%, #ffffff); + color: #f8fffd; + background: linear-gradient(135deg, #05201d, #172036 60%, #2a2030); + box-shadow: + 0 4px 18px rgba(0, 204, 180, 0.22), + inset 0 1px 0 rgba(255, 255, 255, 0.18); +} + +#prisma-next-docs .prisma-next-banner-cta:hover { + color: #ffffff; + background: linear-gradient(135deg, #06302b, #1d2b52 58%, #3b243c); +} + +@keyframes prisma-next-banner-flow { + from { + background-position: + 0% 50%, + 100% 50%, + 0% 50%, + 0 0; + } + + to { + background-position: + 30% 50%, + 70% 50%, + 100% 50%, + 48px 0; + } +} + +@keyframes prisma-next-banner-sweep { + 0%, + 24% { + background-position: + -42rem 0, + 0 0; + } + + 68%, + 100% { + background-position: + calc(100% + 42rem) 0, + 0 0; + } +} + +@keyframes prisma-next-banner-grid { + to { + background-position: + 130% 0, + 32px 32px; + } +} + +@media (prefers-reduced-motion: reduce) { + #prisma-next-docs.prisma-next-banner, + #prisma-next-docs.prisma-next-banner::before, + #prisma-next-docs.prisma-next-banner::after { + animation: none; + } +} + @layer utilities { .glitch { position: relative; diff --git a/apps/docs/src/app/layout.tsx b/apps/docs/src/app/layout.tsx index 973197038b..8aae50af60 100644 --- a/apps/docs/src/app/layout.tsx +++ b/apps/docs/src/app/layout.tsx @@ -10,6 +10,7 @@ import Link from "next/link"; import Script from "next/script"; import { FontAwesomeScript as EclipseFA } from "@prisma/eclipse"; import { Banner } from "fumadocs-ui/components/banner"; +import { ArrowRightIcon } from "lucide-react"; const inter = Inter({ subsets: ["latin"], @@ -89,9 +90,9 @@ export default function Layout({ children }: { children: ReactNode }) { -
+
Prisma Next is in early access. Explore the next Prisma ORM workflow. @@ -100,10 +101,11 @@ export default function Layout({ children }: { children: ReactNode }) { href="/next" className={cn( buttonVariants({ variant: "secondary", size: "sm" }), - "h-7 shrink-0 whitespace-nowrap px-2 py-1 text-xs", + "prisma-next-banner-cta h-7 shrink-0 whitespace-nowrap px-2 py-1 text-xs", )} > Read the docs +
diff --git a/apps/docs/src/components/sidebar-badge-provider.tsx b/apps/docs/src/components/sidebar-badge-provider.tsx index 832dd2c50c..8e49943615 100644 --- a/apps/docs/src/components/sidebar-badge-provider.tsx +++ b/apps/docs/src/components/sidebar-badge-provider.tsx @@ -30,18 +30,36 @@ const BADGE_COLOR: Record = { deprecated: "warning", }; +function shouldHideSidebarBadge(url: string, badge: BadgeType | undefined) { + if (badge !== "early-access") { + return false; + } + + const docsPathname = url.replace(/^\/docs(?=\/|$)/, "") || "/"; + + return ( + docsPathname === "/next" || + docsPathname.startsWith("/next/") || + docsPathname === "/orm/next" || + docsPathname.startsWith("/orm/next/") || + docsPathname === "/cli/next" || + docsPathname.startsWith("/cli/next/") + ); +} + export const SidebarBadgeItem: FC<{ item: PageTree.Item }> = ({ item }) => { const badges = use(BadgeContext); const badge = badges[item.url] as BadgeType | undefined; + const visibleBadge = shouldHideSidebarBadge(item.url, badge) ? undefined : badge; return ( {item.name} - {badge && ( + {visibleBadge && ( diff --git a/apps/docs/src/lib/version.ts b/apps/docs/src/lib/version.ts index 3244aa915a..cc4c2a8cc1 100644 --- a/apps/docs/src/lib/version.ts +++ b/apps/docs/src/lib/version.ts @@ -22,19 +22,41 @@ const LATEST_CLI_ROOT = "/cli"; const NEXT_CLI_ROOT = "/cli/next"; const NEXT_GETTING_STARTED_PATHS_BY_LATEST_PATH = new Map([ ["/", NEXT_GETTING_STARTED_ROOT], - ["/getting-started", NEXT_GETTING_STARTED_ROOT], + ["/getting-started", "/next/getting-started"], ["/prisma-orm", NEXT_GETTING_STARTED_ROOT], ["/prisma-orm/quickstart/postgresql", "/next/quickstart/postgresql"], ["/prisma-orm/quickstart/mongodb", "/next/quickstart/mongodb"], ["/prisma-orm/add-to-existing-project/postgresql", "/next/add-to-existing-project/postgresql"], ["/prisma-orm/add-to-existing-project/mongodb", "/next/add-to-existing-project/mongodb"], + ["/prisma-postgres", "/next/prisma-postgres/quickstart/prisma-next"], + ["/prisma-postgres/quickstart/prisma-orm", "/next/prisma-postgres/quickstart/prisma-next"], + [ + "/prisma-postgres/import-from-existing-database-postgresql", + "/next/prisma-postgres/import-from-existing-database-postgresql", + ], + [ + "/prisma-postgres/import-from-existing-database-mysql", + "/next/prisma-postgres/import-from-existing-database-mysql", + ], + ["/prisma-postgres/from-the-cli", "/next/prisma-postgres/from-the-cli"], ]); const LATEST_GETTING_STARTED_PATHS_BY_NEXT_PATH = new Map([ [NEXT_GETTING_STARTED_ROOT, "/"], + ["/next/getting-started", "/getting-started"], ["/next/quickstart/postgresql", "/prisma-orm/quickstart/postgresql"], ["/next/quickstart/mongodb", "/prisma-orm/quickstart/mongodb"], ["/next/add-to-existing-project/postgresql", "/prisma-orm/add-to-existing-project/postgresql"], ["/next/add-to-existing-project/mongodb", "/prisma-orm/add-to-existing-project/mongodb"], + ["/next/prisma-postgres/quickstart/prisma-next", "/prisma-postgres/quickstart/prisma-orm"], + [ + "/next/prisma-postgres/import-from-existing-database-postgresql", + "/prisma-postgres/import-from-existing-database-postgresql", + ], + [ + "/next/prisma-postgres/import-from-existing-database-mysql", + "/prisma-postgres/import-from-existing-database-mysql", + ], + ["/next/prisma-postgres/from-the-cli", "/prisma-postgres/from-the-cli"], ]); function normalizePathname(pathname: string) { diff --git a/apps/docs/src/lib/versioned-sidebar-tree.ts b/apps/docs/src/lib/versioned-sidebar-tree.ts index 6e7abdde15..23056cad90 100644 --- a/apps/docs/src/lib/versioned-sidebar-tree.ts +++ b/apps/docs/src/lib/versioned-sidebar-tree.ts @@ -45,7 +45,12 @@ function isGettingStartedVersionNode(node: TreeNode, version: Version) { const name = String(node.name ?? "").toLowerCase(); if (version === "next") { - return name === "next" || node.index?.url === "/next"; + return ( + name === "next" || + name === "prisma next" || + node.url === "/next" || + node.index?.url === "/next" + ); } return false;