Nextjs – integracja z mysql

npm install mysql2

import mysql from 'mysql2/promise';

const dbConfig = {
  host:     process.env.DB_HOST, 
  user:     process.env.DB_USER, 
  password: process.env.DB_PASSWORD, 
  database: process.env.DB_NAME,
};

export async function getConnection() {
  const connection = await mysql.createConnection(dbConfig);
  return connection;
}

import { getConnection } from '../../lib/db';

export default async function handler(req, res) {
  let connection;
  try {
    connection = await getConnection();

    if (req.method === 'GET') {
      // Pobierz użytkowników z bazy
      const [rows] = await connection.execute('SELECT * FROM users');
      res.status(200).json(rows);
    } else if (req.method === 'POST') {
      // Dodaj nowego usera do bazy
      const { name, email } = req.body;
      const [result] = await connection.execute(
        'INSERT INTO users (name, email) VALUES (?, ?)',
        [name, email]
      );
      res.status(201).json({ id: result.insertId, name, email });
    } else {
      res.setHeader('Allow', ['GET', 'POST']);
      res.status(405).end(`Method ${req.method} Not Allowed`);
    }
  } catch (error) {
    res.status(500).json({ error: error.message });
  } finally {
    if (connection) await connection.end(); // Zamknij połączenie
  }
}

Krok 4: Wywołanie API z frontendu

Teraz możesz użyć Fetch API lub biblioteki jak axios, aby komunikować się z API z poziomu komponentów Next.js. Przykładowy komponent:

---

import { useEffect, useState } from 'react';

export default function Home() {
const [users, setUsers] = useState([]);
const [name, setName] = useState('');
const [email, setEmail] = useState('');

// Pobierz użytkowników
useEffect(() => {
   fetch('/api/users')
   .then((res) => res.json())
   .then((data) => setUsers(data));
  }, []);

  // Dodaj użytkownika
  const handleSubmit = async (e) => {
  e.preventDefault();
   const res = await fetch('/api/users', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ name, email }),
   });
   const newUser = await res.json();
   setUsers([...users, newUser]);
   setName('');
   setEmail('');
 };

  return (
   <div>
     <h1>Użytkownicy</h1>
     <ul>
        {users.map((user) => (
           <li key={user.id}>
             {user.name} - {user.email}
           </li>
        )}
     </ul>
     <form onSubmit={handleSubmit}>
       <input 
         type="text"
         value={name}
         onChange={ e => setName(e.target.value)}
         placaholder="Imię"
       />
      <input 
         type="email" 
         value={email} 
         onChange={ e => setEmail(e.target.value)} 
         placaholder="Email" 
       />     
       <button type="submit">Dodaj</button>
     </form>
   </div>
 );
}

---

 

4. Zmienne środowiskowe Aby uniknąć wpisywania danych logowania na stałe, użyj pliku .env.local:

DB_HOST=localhost
DB_USER=twoj_user
DB_PASSWORD=twoje_haslo
DB_NAME=twoja_baza

Zaktualizuj lib/db.js:

import mysql from 'mysql2/promise';

const dbConfig = {
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
};

export async function getConnection() {
  const connection = await mysql.createConnection(dbConfig);
  return connection;
}

5. Uwagi
– Zarządzaj połączeniami ostrożnie – w produkcji lepiej użyj puli połączeń (mysql.createPool), aby uniknąć wyczerpania limitu połączeń:

const pool = mysql.createPool(dbConfig);

export function getConnection() {
  return pool;
}

—

Podejście 2: Użycie Prisma (zalecane)
Prisma to nowoczesny ORM, który upraszcza pracę z bazą danych i zapewnia typowanie w TypeScript.

1. Zainstaluj Prisma
W katalogu projektu:

npm install prisma --save-dev
npm install @prisma/client

2. Zainicjuj Prisma
Uruchom:

npx prisma init

To utworzy folder prisma z plikiem schema.prisma i doda .env.

3. Skonfiguruj połączenie z MySQL
Edytuj .env:

DATABASE_URL="mysql://twoj_user:twoje_haslo@localhost:3306/twoja_baza"

W pliku prisma/schema.prisma zdefiniuj model, np.:

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

generator client {
  provider = "prisma-client-js"
}

model User {
  id Int @id @default(autoincrement())
  name String
  email String @unique
}

4. Zsynchronizuj bazę danych
Jeśli masz istniejącą bazę, użyj:

npx prisma db pull

Jeśli tworzysz nową:

npx prisma migrate dev --name init

5. Użyj Prisma w Next.js
Utwórz plik lib/prisma.js:

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default prisma;

Przykład API Route w pages/api/users.js:

import prisma from '../../lib/prisma';

export default async function handler(req, res) {
  try {
    const users = await prisma.user.findMany();
    res.status(200).json(users);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}

6. Użycie w komponentach (Server Components)
W Next.js 13+ z App Router możesz używać Prisma w Server Components:

import prisma from '../lib/prisma';

export default async function UsersPage() {
  const users = await prisma.user.findMany();
  return (
    <ul>
     {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

—

Porównanie
– mysql2: Prostsze, ale wymaga ręcznego pisania SQL i zarządzania połączeniami. Dobre dla małych projektów.
– Prisma: Więcej konfiguracji na start, ale oferuje bezpieczeństwo typów, automatyczne migracje i prostszą składnię. Lepsze dla większych aplikacji.

Wdrożenie na VPS z Apache2
– Upewnij się, że MySQL działa na serwerze (np. sudo apt install mysql-server i skonfiguruj bazę).
– Skopiuj projekt na serwer, zainstaluj zależności (npm install) i uruchom aplikację (npm run build && npm run start).
– Skonfiguruj Apache2 jako reverse proxy (patrz poprzednia odpowiedź).