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, якщо ви увімкнете його у інтерактивних налаштуваннях, тому для нового проекту, який це обрав, не потрібна окрема установка 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

Це додасть Алісу та Боба разом із їхніми дописами.

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, перш ніж починати відлагоджування компонента сторінки.