Next.js 환경에 익숙한 개발자가 Laravel + Inertia.js 프레임워크를 사용할 때 참고할 핵심 차이점과 개발 방식 정리
1. 라우팅 (Routing)
- Next.js: 파일 시스템 기반 라우팅 (
app/page.tsx->/) - Laravel + Inertia: 코드 기반 라우팅 (
routes/web.php)- 모든 경로는
routes/web.php에서 명시적으로 정의. Inertia::render('Welcome')은resources/js/Pages/Welcome.tsx컴포넌트를 렌더링
- 모든 경로는
2. 데이터 페칭 (Data Fetching)
- Next.js:
fetch,React Query,getServerSideProps등을 통해 API 호출 - Laravel + Inertia: 컨트롤러에서 직접 Props 주입
- 백엔드(PHP)에서 데이터를 조회한 뒤
Inertia::render()의 두 번째 인자로 넘기면, React 컴포넌트의props로 즉시 전달됩니다. - 장점: API 엔드포인트를 따로 만들거나 클라이언트에서
useEffect로 호출할 필요가 없습니다.
- 백엔드(PHP)에서 데이터를 조회한 뒤
3. 전역 상태 관리 (Shared Data)
- Next.js:
Context API,Redux,Zustand - Laravel + Inertia:
usePage훅 및HandleInertiaRequests미들웨어- 모든 페이지에서 공통으로 필요한 데이터(인증된 사용자, 설정 등)는
app/Http/Middleware/HandleInertiaRequests.php에서 정의합니다. - 프론트엔드에서는
@inertiajs/react의usePage().props를 통해 어디서든 접근 가능합니다.
- 모든 페이지에서 공통으로 필요한 데이터(인증된 사용자, 설정 등)는
4. 폼 처리 (Form Handling)
- Next.js:
Server Actions,react-hook-form - Laravel + Inertia:
useForm훅- Inertia에서 제공하는
useForm은 백엔드 유효성 검사 결과(Validation Errors)를 자동으로 props에 매핑해주며, 로딩 상태(processing) 등을 쉽게 관리할 수 있게 해줍니다.
- Inertia에서 제공하는
5. 프로젝트 특화 도구 (Special Tools)
- Wayfinder: 백엔드 라우트를 프론트엔드에서 타입 안전하게 사용할 수 있게 해줍니다.
- 예:
import { store } from '@/actions/App/Http/Controllers/PostController'
- 예:
- Artisan: 파일 생성(Controller, Model, Migration 등) 시 항상 명령어를 사용하세요.
php artisan make:controller PostController
- Laravel Boost: AI 제공하는 도구를 통해 DB 스키마 조회, Tinker 실행 등을 요청할 수 있습니다.
팁: 개발 흐름 비교
| 단계 | Next.js 방식 | Laravel + Inertia 방식 |
|---|---|---|
| 페이지 생성 | app/about/page.tsx 생성 |
routes/web.php에 경로 추가 + Pages/About.tsx 생성 |
| 데이터 조회 | API Route 생성 후 fetch |
컨트롤러에서 모델 조회 후 Inertia::render로 전달 |
| 데이터 전송 | POST 요청 API 생성 |
컨트롤러에 store 메서드 작성 + useForm으로 전송 |
| 인증 확인 | next-auth, Middleware |
Laravel 내장 Auth 미들웨어 사용 |
반응형
