Aparte na opisie z How to Build a Fullstack App with Next.js, Prisma, and Vercel Postgres
Tworzę aplikację Next.js o nazwienext-test
npx create-next-app@latest next-test
.gitignore i można sobie uruchomić aplikację, aby sprawdzić czy wszystko działa
npm run dev
git push origin main
Utworzyć aplikację na Vercel o nnazwie, najlepiej takiej jak utworzona, czyli w naszym przypadku next-test.
Utworzenie aplikacji na Vercel sprowadza się do nadania jej w Github uprawnienia dla portalu Vercel.
W projekcie Vercel kliknąć zakładkę Storage i utworzyć bazę danych Postgres. Utworzoną bazę przypisać do projektu. Podczas tego procesu powstanie szereg zmiennych środowiskowych opisujących bazę Postgres
Teraz czas na instalacjęCLI Vercel:
npm i -g vercel@latest
Gdy się wszystko zainstaluje ściągamy utworzone wcześniej zmienne środowiskowe do lokalnego pliku .env,
ale przedtem linkujemy się do projektu
vercel link
vercel env pull .env
.env* w pliku .gitignore
Instalujemy pakiet Prisma:
npm install prisma --save-dev
prisma, a w nim plik schema.prisma
mkdir prisma && touch prisma/schema.prisma
schema.prisma umieszczamy przykładowy kod
// schema.prisma
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("POSTGRES_PRISMA_URL") // uses connection pooling
directUrl = env("POSTGRES_URL_NON_POOLING") // uses a direct connection
}
model Post {
id String @default(cuid()) @id
title String
content String?
published Boolean @default(false)
author User? @relation(fields: [authorId], references: [id])
authorId String?
}
model User {
id String @default(cuid()) @id
name String?
email String? @unique
createdAt DateTime @default(now()) @map(name: "created_at")
updatedAt DateTime @updatedAt @map(name: "updated_at")
posts Post[]
@@map(name: "users")
}
Zmienne POSTGRES_PRISMA_URL i POSTGRES_URL_NON_POOLING są nazwami wziętymi z pliku .env ściągniętego z Vercel.
npx prisma db push
Można sobie sprawdzić w panelu bazy danych na Vercel, czy obie tabele zostały poprawnie utworzone.
Teraz można uruchomić Prisma Studio:
npx prisma studio
Podczas uruchomiania Prisma Studio linia komend wskaże linka z portem, z którego można uruchomić Studio w przeglądarce.
Tworzymy rekordy dla User i Post w Prisma Stidio
Instalujemy Prisma CLient:
npm install @prisma/client
schema.prisma zostaje zmieniony należy wykonać generowanie:
npx prisma generate
lib, a w nim plik prisma.ts
mkdir lib && touch lib/prisma.ts
prisma.ts
// lib/prisma.ts
import { PrismaClient } from '@prisma/client';
let prisma: PrismaClient;
if (process.env.NODE_ENV === 'production') {
prisma = new PrismaClient();
} else {
if (!global.prisma) {
global.prisma = new PrismaClient();
}
prisma = global.prisma;
}
export default prisma;
prisma. Wtedy w katalogu głównym projektu utówrz plik global.d.ts
touch global.d.ts
// /global.d.ts
import { PrismaClient } from '@prisma/client';
declare global {
// eslint-disable-next-line no-var
var prisma: PrismaClient;
}
prisma importując ją tak:
import prisma from '../lib/prisma';
Przykładowe wykorzystanie
W folderzelib tworzymy plik actions.ts
touch lib/actions.ts
actions.ts dodajemy funkcję getPosts()
// lib/actions.ts
import prisma from './prisma';
export async function getPosts(isPublished: boolean = true) {
return prisma.post.findMany({
where: { published: isPublished },
include: {
author: {
select: { name: true },
},
},
});
}
posts
mkdir app/posts && touch app/posts/page.tsx
posts/page.tsx dodajemy następujący kod, aby zobaczyć nnaniesione wcześniej w Prisma Studio posty:
// posts/page.tsx
import { getPosts } from "@/lib/actions";
import { Post } from "@prisma/client";
export default async function Posts() {
const posts: Post[] = await getPosts(false);
return (
{posts.map((post) => {
return <div key="{post.id}">{post.title}<div>;
})}
);
}
To już prawie wszystko.
Prawie, gdyż w tym stanie deploy na Vercel może pokazać błędy.
Jest to spowodawane tym, żę Prisma wymaga uruchomienia npx prism generate po każdej zmianie.
Dodajemy więc "postinstall": "prisma generate" do sekcji "scripts" w pliku package.json
Cała więc sekcja "scripts" powinna wyglądać mniej więcej tak:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"postinstall": "prisma generate"
}
