Building a Laravel 13 + Next.js Monolith for Beginners - Complete Guide

If you're new to Laravel or Next.js, one of the biggest challenges is deciding how to organize your project.

Most tutorials recommend creating two separate applications:

• Laravel Backend (api.example.com)
• Next.js Frontend (example.com)

While this works, beginners quickly run into problems:

• CORS errors
• Authentication complexity
• Two repositories to maintain
• Two deployment pipelines
• Two .env files
• Different ports during development
• Complicated server configuration

For small and medium-sized applications, this architecture is often unnecessary.

A much simpler approach is to build a Monolithic Repository, where Laravel and Next.js live inside the same project.

This guide walks you through setting up a modern Laravel 13 + Next.js (JavaScript) monolith from scratch.

Why Choose a Monolith?

Instead of maintaining two independent projects, everything lives in one repository.

my-project/
|
|-- app/
|-- bootstrap/
|-- config/
|-- database/
|-- public/
|-- resources/
|-- routes/
|-- storage/
|-- frontend/
|
|-- artisan
|-- composer.json
`-- package.json

Benefits

• Single Git repository
• Single deployment
• No CORS configuration
• Same domain for frontend and backend
• Simpler authentication
• Easy API communication
• Ideal for beginners and small teams

Prerequisites

Before starting, make sure you have installed:

• PHP 8.3 or newer
• Composer
• Node.js 20 or newer
• npm

Verify your installation:

php -v
composer -V
node -v
npm -v

Step 1 - Create a Laravel Project

Create a new Laravel application.

composer create-project laravel/laravel my-project

Navigate into the project.

cd my-project

Start Laravel.

php artisan serve

Open:

http://127.0.0.1:8000

If you see the Laravel welcome page, you're ready for the next step.

Step 2 - Create the Next.js Application

Create Next.js inside your Laravel project.

npx create-next-app@latest frontend

Choose the following options:

TypeScript?          No
ESLint?              Yes
Tailwind CSS?        Yes
src directory?       Yes
App Router?          Yes
Turbopack?           Yes
Import Alias?        No (or keep default)

Your project structure should now look like this:

my-project/

app/
bootstrap/
config/
public/
resources/
routes/

frontend/
    app/
    public/
    package.json
    next.config.mjs

Step 3 - Run Both Applications

Open two terminals.

Terminal 1

php artisan serve

Laravel runs on:

http://127.0.0.1:8000

Terminal 2

cd frontend

npm install

npm run dev

Next.js runs on:

http://localhost:3000

During development, Laravel and Next.js run independently.