Připojení MongoDB Atlas k Next.js

Jak připojit MongoDB Atlas k Next.js

Připojení databáze MongoDB Atlas k aplikaci Next.js je klíčovým krokem pro vývoj dynamických webových aplikací, které vyžadují robustní a škálovatelné úložiště dat. V tomto článku vás provedu všemi kroky potřebnými k tomu, abyste úspěšně připojili MongoDB Atlas ke své Next.js aplikaci s využitím mongoose a TypeScriptu. Jako příklad společně vytvoříme kolekci pro blogové příspěvky.

Vytvoření MongoDB Atlas účtu a clusteru

Prvním krokem je vytvoření účtu na MongoDB Atlas a nastavení nového clusteru. MongoDB Atlas je cloudová služba, která nabízí plně spravované instance MongoDB s možností snadného škálování a zabezpečení. Po vytvoření účtu a přihlášení postupujte podle průvodce pro vytvoření clusteru.

Nastavení whitelistu IP adres a uživatelů v MongoDB Atlas

Pro připojení k MongoDB Atlas z vaší aplikace je nutné správně nastavit whitelist IP adres a vytvořit uživatele s přístupem do databáze. Toto nastavení se provádí v konzoli MongoDB Atlas.

Přihlaste se do svého účtu MongoDB Atlas a přejděte do sekce 'Network Access'. Klikněte na 'Add IP Address' a přidejte IP adresy, ze kterých budete přistupovat k databázi. Můžete přidat svou aktuální IP adresu nebo použít '0.0.0.0/0' pro přístup z jakékoliv IP adresy (tento přístup není doporučen z bezpečnostních důvodů). Poté přejděte do sekce 'Database Access' a vytvořte nového uživatele. Zadejte uživatelské jméno a heslo, které použijete ve svém připojovacím řetězci. Nastavte role tohoto uživatele podle toho, jaké oprávnění potřebujete. Pro základní práci s databází postačí role 'Read and Write to any database'.

Instalace mongoose a konfigurace prostředí

Abychom mohli pracovat s MongoDB v aplikaci Next.js, je potřeba nainstalovat mongoose. Tato knihovna nám umožní snadno modelovat data a pracovat s MongoDB pomocí schémat. Spolu s mongoose nainstalujeme i typové definice pro TypeScript:

npm install mongoose
npm install --save-dev @types/mongoose

Po instalaci mongoose vytvořte soubor .env.local v kořenovém adresáři vaší aplikace Next.js. Do tohoto souboru uložte připojovací řetězec, který jste získali z MongoDB Atlas. Ujistěte se, že je tento soubor přidán do .gitignore, aby se vaše citlivé údaje nedostaly do repozitáře.

MONGODB_URI=mongodb+srv://<username>:<password>@cluster0.mongodb.net/WEBZI_DATABASE?retryWrites=true&w=majority

Nastavení mongoose v Next.js

Nyní, když máme nastavené prostředí a připojovací řetězec, je čas nakonfigurovat mongoose ve vaší aplikaci. Vytvořte soubor mongoose.ts v adresáři lib ve vaší aplikaci Next.js a nakonfigurujte připojení k MongoDB:

import mongoose from 'mongoose';

const MONGODB_URI = process.env.MONGODB_URI;

if (!MONGODB_URI) {
  throw new Error('Please define the MONGODB_URI environment variable inside .env.local');
}

let cached = global.mongoose;

if (!cached) {
  cached = global.mongoose = { conn: null, promise: null };
}

async function dbConnect() {
  if (cached.conn) {
    return cached.conn;
  }

  if (!cached.promise) {
    cached.promise = mongoose.connect(MONGODB_URI, {
      bufferCommands: false,
    }).then(mongoose => {
      return mongoose;
    });
  }
  cached.conn = await cached.promise;
  return cached.conn;
}

export default dbConnect;

Tato konfigurace zajišťuje, že se k databázi připojujeme jen jednou a připojení je uloženo v cache pro opětovné použití, což je důležité pro výkon aplikace.

Vytvoření modelu pomocí mongoose

Pro modelování dat v MongoDB pomocí mongoose je třeba definovat schéma a model. Vytvořte nový soubor BlogPost.ts v adresáři models a definujte model blogového příspěvku:

import mongoose, { Schema, Document, model } from 'mongoose';

export interface IBlogPost extends Document {
  title: string;
  content: string;
  author: string;
  date: Date;
}

const BlogPostSchema: Schema = new Schema({
  title: { type: String, required: true },
  content: { type: String, required: true },
  author: { type: String, required: true },
  date: { type: Date, default: Date.now },
});

export default mongoose.models.BlogPost || model<IBlogPost>('BlogPost', BlogPostSchema);

Tento model popisuje strukturu blogového příspěvku, včetně povinných polí jako je title, content a author. Typy jsou definovány pomocí TypeScriptu, což zajišťuje, že pracujeme s validními daty.

Testování spojení s MongoDB

Před tím, než začneme implementovat API, je dobré ověřit, že se aplikace může úspěšně připojit k databázi a načíst data. Můžete vytvořit jednoduchý testovací route, který se pokusí získat data z kolekce BlogPosts:

import { NextResponse } from 'next/server';
import dbConnect from '@/app/src/lib/mongoose';
import BlogPost from '@/app/src/lib/models/BlogPost';

export async function GET() {
    try {
        await dbConnect();
        const post = await BlogPost.findOne({}).lean().exec();
        if (!post) {
            return NextResponse.json({ success: false, message: 'No posts found in the BlogPosts collection' }, { status: 404 });
        }
        return NextResponse.json({ success: true, data: post });
    } catch (error) {
        console.error('Database connection failed:', error);
        return NextResponse.json({ success: false, error: 'Database connection failed' }, { status: 500 });
    }
}

Pokud tento testovací endpoint vrátí příspěvek z databáze, znamená to, že připojení k MongoDB funguje správně a můžeme pokračovat s implementací dalších funkcí.

Vytvoření API endpointů v Next.js

S funkčním připojením můžeme pokračovat s implementací API endpointů v Next.js, které budou komunikovat s MongoDB. Příklad endpointu, který načte všechny blogové příspěvky, může vypadat takto:

import { NextResponse } from 'next/server';
import dbConnect from '@/app/src/lib/mongoose';
import BlogPost from '@/app/src/lib/models/BlogPost';

export async function GET() {
    try {
        await dbConnect();
        const posts = await BlogPost.find({}).lean().exec();

        return NextResponse.json({ success: true, data: posts });
    } catch (error) {
        return NextResponse.json({ success: false, error: 'Database connection failed' }, { status: 500 });
    }
}

Tento endpoint načte všechny příspěvky z kolekce BlogPosts a vrátí je ve formátu JSON. Tento přístup je vhodný pro vytváření API, které bude komunikovat s vaším frontendem nebo mobilní aplikací.

Použití TypeScriptu pro robustní aplikace

Použití TypeScriptu v kombinaci s mongoose poskytuje další vrstvu zabezpečení a kontroly nad daty, se kterými pracujete. Typování dat umožňuje lépe chápat strukturu vašich datových modelů a předcházet chybám při vývoji. Při použití TypeScriptu v Next.js aplikaci je důležité si uvědomit, že všechny části aplikace by měly být správně typovány, včetně modelů, funkcí a komponent.