Imagem do artigo Como integrar o Inertia com ReactJS no Laravel 12

Artigo - Como integrar o Inertia com ReactJS no Laravel 12

28/10/2025

Tutorial: Configuração do Inertia.js com Laravel e React


Aprenda a configurar uma aplicação Laravel utilizando Inertia.js e React, criando um setup moderno para desenvolvimento fullstack sem complicações.

Pré-requisitos

Antes de começar, certifique-se de ter instalado:

  1. PHP 8.2+
  2. Node.js 18+
  3. Composer
  4. NPM ou Yarn


1. Instalação do Laravel

Crie um novo projeto Laravel e acesse o diretório do projeto:

composer create-project laravel/laravel inertia-teste
cd inertia-teste


2. Instalação do Inertia.js

Backend (Laravel)

Instale o adaptador do Inertia para Laravel:

composer require inertiajs/inertia-laravel


Publique o middleware do Inertia:

php artisan inertia:middleware


Registre o middleware em bootstrap/app.php:

// No topo do seu arquivo:
use App\Http\Middleware\HandleInertiaRequests;


// Dentro do método withMiddleware:
->withMiddleware(function (Middleware $middleware) {
$middleware->web(append: [
HandleInertiaRequests::class,
]);
})


Frontend (React)

Instale as dependências necessárias:

npm install @inertiajs/react react react-dom @vitejs/plugin-react
npm install --save-dev


3. Configuração do Vite

Atualize o arquivo vite.config.js para suportar React e Inertia:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.jsx'],
refresh: true,
}),
react(),
],
resolve: {
alias: {
'@': '/resources/js',
},
},
});


4. Configuração das Rotas

Edite routes/web.php para renderizar páginas Inertia:

//No topo do seu arquivo:
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

//Rota para teste
Route::get('/', function () {
return Inertia::render('Home');
});


5. Criando os Componentes React

Crie o arquivo resources/js/app.jsx (ou altere o app.js para app.jsx)

import './bootstrap';
import '../css/app.css';
import { createRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
createInertiaApp({
resolve: (name) => resolvePageComponent(
`./Pages/${name}.jsx`,
import.meta.glob('./Pages/**/*.jsx')
),
setup({ el, App, props }) {
createRoot(el).render(<App {...props} />);
},
});


Página Inicial resources/js/Pages/Home.jsx

import React from 'react';
import { Head } from '@inertiajs/react';
export default function Home() {
return (
<>
<Head>
<title>Inertia App</title>
<meta name="description" content="Minha aplicação Inertia" />
</Head>
<div className="py-12">
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div className="p-6 text-gray-900">
<h1 className="text-2xl font-bold">Bem-vindo ao Inertia.js com React!</h1>
<p className="mt-4">Sua aplicação está funcionando perfeitamente com Laravel e React.</p>
</div>
</div>
</div>
</div>
</>
);
}


6. Configuração do Template Base

Crie resources/views/app.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Scripts -->
@viteReactRefresh
@vite(['resources/css/app.css', 'resources/js/app.jsx'])
@inertiaHead
</head>

<body class="font-sans antialiased">
@inertia
</body>

</html>


7. Executando a Aplicação

Inicie o servidor Vite:

npm run dev


Em outro terminal, inicie o servidor Laravel:

php artisan serve


Agora, sua aplicação estará disponível em: http://localhost:8000


Próximos Passos

  1. Adicione mais rotas e componentes
  2. Configure a autenticação com Laravel Breeze ou Jetstream
  3. Adicione estilos com Tailwind CSS ou outro framework
  4. Implemente tratamento de erros e carregamento de página
  5. Implemente typescript


Dicas Úteis

  1. Use o hook usePage para acessar props e URLs
  2. Utilize o componente Link do Inertia para navegação sem recarregar a página
  3. Aproveite os recursos do React, como hooks e Context API


Solução de Problemas

Se encontrar erros, verifique:

  1. Se todas as dependências foram instaladas corretamente
  2. Se os arquivos estão nos locais corretos
  3. Se as rotas estão configuradas adequadamente
  4. Se o servidor Vite está em execução


Com isso, você terá sua aplicação Laravel com Inertia.js e React totalmente configurada e pronta para desenvolvimento!

Ver todos os posts