Skip to main content

​
Overview

Laravel Breeze Next.js is built with Next.js 16, TypeScript, and Tailwind CSS v4. This guide covers the initial setup and configuration.

​
Prerequisites

  • Node.js 18.x or higher
  • npm or yarn package manager
  • Laravel backend running (see Backend Guide)

​
Installation

​
1. Install Dependencies

npm install

​
Key Dependencies

The frontend uses the following core packages:
package.json
{
  "dependencies": {
    "@headlessui/react": "^2.2.9",
    "@tailwindcss/forms": "^0.5.11",
    "axios": "^1.13.5",
    "formik": "^2.4.9",
    "next": "16.1.6",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
    "swr": "^2.4.0",
    "yup": "^1.7.1"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.18",
    "@types/node": "^25.2.3",
    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
    "tailwindcss": "^4.1.18",
    "typescript": "^5.9.3"
  }
}

​
TypeScript Configuration

The project uses strict TypeScript with path aliases for clean imports:
tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules"]
}

​
Path Aliases

The @/* alias maps to ./src/*, allowing you to import modules cleanly: 
import { useAuth } from '@/hooks/auth'
import axios from '@/lib/axios'
import Navigation from '@/components/Layouts/Navigation'

​
Tailwind CSS Configuration

The project uses Tailwind CSS v4 with the new CSS-based configuration:

​
PostCSS Configuration

postcss.config.js
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

​
Global Styles

src/app/globals.css
@import 'tailwindcss';

@theme {
  --background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
  --background-image-gradient-conic: conic-gradient(
    from 180deg at 50% 50%,
    var(--tw-gradient-stops)
  );
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

​
Tailwind Forms Plugin

The @tailwindcss/forms plugin provides beautiful form styles out of the box: 
<Field
  id="email"
  name="email"
  type="email"
  className="block mt-1 w-full rounded-md shadow-xs border-gray-300 focus:border-indigo-300 focus:ring-3 focus:ring-indigo-200 focus:ring-opacity-50"
/>

​
Environment Variables

Create a .env.local file in the root directory:
.env.local
NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

​
Environment Variable Usage

  • NEXT_PUBLIC_BACKEND_URL - The URL of your Laravel backend API
  • Prefix with NEXT_PUBLIC_ to expose variables to the browser
  • Never commit .env.local to version control

​
Next.js Configuration

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {}

module.exports = nextConfig

​
Development Server

Start the development server: 
npm run dev
The application will be available at http://localhost:3000.

​
Build for Production

Create an optimized production build: 
npm run build
npm start

​
Font Configuration

The project uses Google Fonts with Next.js font optimization:
src/app/layout.tsx
import { Nunito } from 'next/font/google'

const nunito = Nunito({ subsets: ['latin'] })

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={`${nunito.className} text-gray-900 antialiased`}>
        {children}
      </body>
    </html>
  )
}

​
Project Structure

src/
├── app/                    # Next.js App Router
│   ├── (authenticated)/    # Protected routes
│   ├── (guest)/           # Public routes
│   ├── layout.tsx         # Root layout
│   └── globals.css        # Global styles
├── components/            # Reusable components
├── hooks/                 # Custom React hooks
├── lib/                   # Utility libraries
└── types/                 # TypeScript types

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us