Hosting
A projektet illetve a dokumentációnkat a Vercel -en hostoljuk. A Vercel a Next.js fejlesztői által létrehozott platform, amely a Next.js alkalmazások futtatására optimalizált, így zökkenőmentes telepítési élményt és kiváló teljesítményt biztosít.
Előfeltételek
- Működő Next.js alkalmazás
- GitHub, GitLab vagy Bitbucket fiók a forráskód tárolásához
- Vercel fiók (ingyenes regisztrációra van lehetőség)
Telepítés
Alkalmazás előkészítése
Győződjünk meg róla, hogy a Next.js alkalmazásunk megfelelően működik lokálisan, és verziókezelés alatt áll. (pl. Git)
# Ellenőrizzük, hogy a Next.js alkalmazás helyesen működik
bun run dev
# Ha még nincs verziókezelve
git init
git add .
git commit -m "commit message"Kód feltöltése Remote Repositoryba
Töltsük fel a kódot a távoli repositoryba.
git remote add origin <remote_repository_url>
git push -u origin mainProjekt inicializálása Vercel-en
- Jelentkezzünk be a Vercel fiókunkba
- A dashboard-on a “New Project”
- Importáljuk a repository-t a Vercel-be a megfelelő szolgáltatóval (pl. GitHub)
- Válasszuk ki a projekthez tartozó repository-t
Konfigurálás
A Vercel automatikusan felismeri a Next.js projekteket, de általában nem igényel további konfigurációt.
- Project Name: Adjuk meg a projekt nevét
- Framework Preset: Automatikusan Next.js
- Build and Output Settings: Általában automatikusan konfigurálva
- Environment Variables: Ha szükséges, beállíthatjuk környezeti változókat
Telepítés (Deploy)
A Vercel a Deploy gombra kattintva telepíti a Next.js alkalmazást, és a telepítés után a Vercel által biztosított URL-en érhető el.
Környezeti változók kezelése
Környezeti változók hozzáadása:
- A projekt dashboardján kattints a “Settings” gombra
- Válaszd a “Environment Variables” menüpontot
- Add hozzá a kulcs-érték párokat
- Meghatározhatod, hogy mely környezetekben legyenek elérhetők (Production, Preview, Development)
Hibaelhárítás
Ha problémákba ütközöl a deployment során:
- Ellenőrizd a build log-okat a hibaüzenetekért
- Győződj meg róla, hogy a szükséges környezeti változók be vannak állítva
- Ellenőrizd, hogy a Next.js verzió kompatibilis-e a Vercel platformmal
- Használd a Vercel CLI-t lokális teszteléshez: npx vercel dev
Összefoglalás
A Vercel a legegyszerűbb és leghatékonyabb módja a Next.js alkalmazások hosztolásának, hiszen:
- Optimalizált a Next.js alkalmazásokhoz
- Edge Network-öt használ a gyorsabb betöltéshez
- Egyszerű domain és SSL beállítások
- Ingyenes tier elérhető kisebb projektekhez