Next.js, Tailwind і Prisma з Docker Postgres

Абяцкія ўмовы

З’ядзейце гэтыя інструменты прытаму, перш чым выконваць наступныя крокі:

• Docker (для локальнага контэйнера Postgres)
• Node.js (рэкамендуецца версія v16+)
• npm (праўяецца разам з Node)

1) Створыце проект Next.js

Іспользуйце афіцыйны ініцыялайзер і адпавядзейце на запитанні. Для гэтага керавання рэкамендуецца варыянт App Router і TypeScript.

npx create-next-app@latest notes-taking

# choose your options in the interactive prompt (App Router, TypeScript recommended)

cd note-taking

Ёсць можлівасць заставіць викорыстоўваць TypeScript з першага каманды:

npx create-next-app@latest note-taking — ts

2) Дадзіце Tailwind CSS (ён вялікі ў NextJs)

Няўялікі шаблоны create-next-app вже уключаюць Tailwind, калі яго актываўаць у інтэракtywnых настройках, таму для новага проекта, які яго выбраў, не трэба аддзельна інсталаваць Tailwind.

3) Запускайце Postgres за дапамойкой Docker (локальна)

Запусціце Postgres у контэйнеры:

docker run — name notes-postgres -e POSTGRES_PASSWORD=password -e POSTGRES_DB=notes_app -p 5432:5432 -d postgres:latest

Значэння пазнак:

• docker run — стварае і запускае контэйнер
• --name notes-postgres — стабільна назва для пазнейшых каманд
• -e POSTGRES_PASSWORD=... / -e POSTGRES_DB=... — даныя прыўязкі і база дадзеных
• -p 5432:5432 — публікуе порт для хоста
• -d postgres:latest — ад’ёжнае выкарыстоўванне образа Postgres

Паказвайце, чы робіцца ён:

docker ps

Фільтрацыя па образе:

docker ps — filter “ancestor=postgres”

Спісаванне всіх контэйнероў, укладаючы і зупіненыя:

docker ps -a

Фільтрацыя па назве контэйнера:

docker ps — filter “name=notes-postgres”

4) Установіце Prisma і супаўзвязаныя пакеты

З корневага каталогу проекта Next.js:

npm install prisma tsx — save-dev

npm install @prisma/extension-accelerate @prisma/client

Ініцыялізуйце Prisma і стварыце кліента ў каталозе app, каб імпорты App Router заставалі локальнымі:

npx prisma init — db — output ../app/generated/prisma

Это стварае катэгорію prisma/ з файлам schema.prisma, катэгорію .env з значэнням DATABASE_URL, а таксама (з параметрам --output) створаны кліент у катэгоріі app/generated/prisma.

Хочаце выбраць стандартную локацыю кліента? Запускайце процес без настаўлення спецыяльнай локаціі выходу:

npx prisma init — db and remove — output.

5) Настаўленне файла .env (DATABASE_URL)

Указайце DATABASE_URL на экзанпляр Docker Postgres:

DATABASE_URL=”postgresql://postgres:password@localhost:5432/notes_app?schema=public”

Зменіце пароль і назву базы дадзеных, якщо вы выбралі іншыя значэння.

6) Рэдагаванне файла prisma/schema.prisma

Іспользуйце пару модэляў User/Post, якія будуць адпаведныя для скрыпта сэдавання:

generator client {
provider = "prisma-client-js"
output = "../app/generated/prisma"
}

datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}

model User {
id Int @id @default(autoincrement())
name String
email String @unique
posts Post[]
}

model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
authorId Int
author User @relation(fields: [authorId], references: [id])
}

Сохраніце файл, калі модэлі будуць правільныя.

7) Адканаўленне міграцый (стварэнне таблей)

Застосавіце першую міграцыю для стварэння таблей:

npx prisma migrate dev — name init

Prisma запісвае SQL-код у папцы prisma/migrations для такіх змян.

8) Заполненне базы дадзейна

Процэс заполнення дадзейна вводзіць прыкладныя рэкорды, ўнаследкі чаго Prisma Studio і прыстановка адразу маюць даны.

Створыце файл prisma/seed.ts (зменіце імпорт, якщо шлях выходу кліента разны):

// prisma/seed.ts
import { PrismaClient, Prisma } from "../app/generated/prisma";

const prisma = new PrismaClient();

const userData: Prisma.UserCreateInput[] = [
  {
    name: "Alice",
    email: "alice@prisma.io",
    posts: {
      create: [
        {
          title: "Join the Prisma Discord",
          content: "https://pris.ly/discord",
          published: true,
        },
        {
          title: "Prisma on YouTube",
          content: "https://pris.ly/youtube",
        },
      ],
    },
  },
  {
    name: "Bob",
    email: "bob@prisma.io",
    posts: {
      create: [
        {
          title: "Follow Prisma on Twitter",
          content: "https://www.twitter.com/prisma",
          published: true,
        },
      ],
    },
  },
];

export async function main() {
  for (const u of userData) {
    await prisma.user.create({ data: u });
  }
}

main();ty

Зарэгіструйце скрыпт заполнення ў файле package.json:

"prisma": {
"seed": "tsx prisma/seed.ts"
}

Застаўце яго ў роботу:

npx prisma db seed

Це дадае рэкорды Alice і Bob, а таксама ўсія ўпоркі да яных.

9) Ачыніце Prisma Studio

Візуальна адгледзіце та зменяйте рэкорды:

npx prisma studio

Інтэрфейс браузера паказвае моделі та рэкорды.

10) Стварыце обгоркі кліента Prisma (lib/prisma.ts)

Ёжыце стварэнне вельмі большой колькасці экземпляраў PrismaClient пад час розработы, выкарыстоўваючы глобальны сінглтон та расширэнне accelerate. Створыце файл lib/prisma.ts:

// lib/prisma.ts
import { PrismaClient } from "../app/generated/prisma"; // adjust path if needed
import { withAccelerate } from "@prisma/extension-accelerate";

declare global {
// allow global prisma across module reloads in dev
// eslint-disable-next-line no-var
var prisma: PrismaClient | undefined;
}

const prisma =
global.prisma ?? new PrismaClient().$extends(withAccelerate());
if (process.env.NODE_ENV !== "production") global.prisma = prisma;

export default prisma;

Указайте месца запуску імпорту на шлях даўеры, які вы стварылі, або викорыстаўце @prisma/client, якщо вы прыхіліся ад параметра --output.

11) Апранаванне з’яўлення з’язку з БД з Next.js (компонент сервера)

Прыклад файла app/page.tsx, який завантажае корыстнікаў на серверы:

import prisma from '@/lib/db'

export default async function Home() {
  const users = await prisma.user.findMany();
  return (
    <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center -mt-16">
      <h1 className="text-4xl font-bold mb-8 font-[family-name:var(--font-geist-sans)] text-[#333333]">
        Superblog
      </h1>
      <ol className="list-decimal list-inside font-[family-name:var(--font-geist-sans)]">
        {users.map((user) => (
          <li key={user.id} className="mb-2">
            {user.name}
          </li>
        ))}
      </ol>
    </div>
  );
}

Запускайце сервер разработчыка Next.js:

npm run dev

Ачыніце http://localhost:3000 і пераканайцеся, што завантажаныя корыстнікі адобразуюцца.

Пэўны список команд

Стварэнне проекта

npx create-next-app@latest my-app

cd my-app

postgres docker

docker run — name notes-postgres -e POSTGRES_PASSWORD=password -e POSTGRES_DB=notes_app -p 5432:5432 -d postgres:latest

docker ps

docker exec -it notes-postgres psql -U postgres

prisma

npm install prisma tsx — save-dev

npm install @prisma/extension-accelerate @prisma/client

npx prisma init — db — output ../app/generated/prisma

Рэдагаванне файла prisma/schema.prisma

npx prisma migrate dev — name init

Стварэнне файла prisma/seed.ts

Дадаць элемент prisma.seed у package.json

npx prisma db seed

npx prisma studio

npm run dev

Усуненне проблем і парады

• Не можаце з’яўіцца ў Postgres: паказваце контэйнер за дапамогою docker ps, а потым пераканаецеся ў правільнасці хоста і порту DATABASE_URL. Прабавайце викорыстаць psql з хоста або іншаг кліента пры выкарыстоўванні той самай URL.
• Працяванні міграцый: прачытайце SQL-код, створаны Prisma, які знаходзіцца ў падпапцы prisma/migrations, і пераканаецеся, што назва базы дадзеных паспраўджваецца з файлам .env.
• Неправільны імпорт кліента: перастворыце код пасля змены параметра output, або перайдзіце на імпорт з @prisma/client, якщо вы викорыстоўваете стандартную пазіцыю.
• Порожняе інтэрфейс: зноў запускайце процедуру стварэння дадзеных і пераканаецеся, што Prisma Studio паказвае Alice/Bob, прычаму перад дэбагаваннем компонента сторункі.