Laravel Inertia React 全栈开发指南：30+规则构建现代单体应用

laravel-inertia-react by asyrafhussin/agent-skills

401 周安装量

21 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/asyrafhussin/agent-skills --skill laravel-inertia-react

React PHP 框架 Laravel

🇨🇳中文介绍

Laravel + Inertia.js + React

使用 Laravel、Inertia.js 和 React 构建现代单体应用程序的全面模式。包含 30 多个规则，用于实现无缝的全栈开发。

何时应用

在以下情况下参考这些指南：

创建 Inertia 页面组件时
使用 useForm 钩子处理表单时
管理共享数据和身份验证时
实现持久化布局时
在页面之间导航时

按优先级划分的规则类别

优先级	类别	影响	前缀
1	页面组件	关键	`page-`
2	表单与验证	关键	`form-`
3	导航与链接	高	`nav-`

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

1. 页面组件 (关键)

page-props-typing - 为来自 Laravel 的页面属性定义类型
page-component-structure - 标准页面组件模式
page-head-management - 使用 Head 管理标题和元标签
page-default-layout - 为页面分配布局

2. 表单与验证 (关键)

form-useform-basic - useForm 基本用法
form-validation-errors - 显示 Laravel 验证错误
form-processing-state - 处理表单提交状态
form-reset-preserve - 重置与保留表单数据
form-nested-data - 处理嵌套表单数据
form-transform - 提交前转换数据

3. 导航与链接 (高)

nav-link-component - 使用 Link 进行导航
nav-preserve-state - 保留滚动位置和状态
nav-partial-reloads - 仅重新加载已更改的部分
nav-replace-history - 替换与推送历史记录

4. 共享数据 (高)

shared-auth-user - 访问已认证用户
shared-flash-messages - 处理闪存消息
shared-global-props - 访问全局属性
shared-typescript - 为共享数据定义类型

layout-persistent - 持久化布局模式
layout-nested - 嵌套布局
layout-default - 默认布局分配
layout-conditional - 条件布局

6. 文件上传 (中)

upload-basic - 基本文件上传
upload-progress - 上传进度跟踪
upload-multiple - 多文件上传

7. 高级模式 (低)

advanced-polling - 实时轮询
advanced-prefetch - 预取页面
advanced-modal-pages - 模态框作为页面
advanced-infinite-scroll - 无限滚动

使用 TypeScript 的页面组件

// resources/js/Pages/Posts/Index.tsx
import { Head, Link } from '@inertiajs/react'

interface Post {
  id: number
  title: string
  excerpt: string
  created_at: string
  author: {
    id: number
    name: string
  }
}

interface Props {
  posts: {
    data: Post[]
    links: { url: string | null; label: string; active: boolean }[]
  }
  filters: {
    search?: string
  }
}

export default function Index({ posts, filters }: Props) {
  return (
    <>
      <Head title="Posts" />

      <div className="container mx-auto py-8">
        <h1 className="text-2xl font-bold mb-6">Posts</h1>

        <div className="space-y-4">
          {posts.data.map((post) => (
            <article key={post.id} className="p-4 bg-white rounded-lg shadow">
              <Link href={route('posts.show', post.id)}>
                <h2 className="text-xl font-semibold hover:text-blue-600">
                  {post.title}
                </h2>
              </Link>
              <p className="text-gray-600 mt-2">{post.excerpt}</p>
              <p className="text-sm text-gray-400 mt-2">
                By {post.author.name}
              </p>
            </article>
          ))}
        </div>
      </div>
    </>
  )
}

使用 useForm 的表单

// resources/js/Pages/Posts/Create.tsx
import { Head, useForm, Link } from '@inertiajs/react'
import { FormEvent } from 'react'

interface Category {
  id: number
  name: string
}

interface Props {
  categories: Category[]
}

export default function Create({ categories }: Props) {
  const { data, setData, post, processing, errors, reset } = useForm({
    title: '',
    body: '',
    category_id: '',
  })

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault()
    post(route('posts.store'), {
      onSuccess: () => reset(),
    })
  }

  return (
    <>
      <Head title="Create Post" />

      <form onSubmit={handleSubmit} className="max-w-2xl mx-auto py-8">
        <div className="mb-4">
          <label htmlFor="title" className="block font-medium mb-1">
            Title
          </label>
          <input
            id="title"
            type="text"
            value={data.title}
            onChange={(e) => setData('title', e.target.value)}
            className="w-full border rounded px-3 py-2"
          />
          {errors.title && (
            <p className="text-red-500 text-sm mt-1">{errors.title}</p>
          )}
        </div>

        <div className="mb-4">
          <label htmlFor="category" className="block font-medium mb-1">
            Category
          </label>
          <select
            id="category"
            value={data.category_id}
            onChange={(e) => setData('category_id', e.target.value)}
            className="w-full border rounded px-3 py-2"
          >
            <option value="">Select a category</option>
            {categories.map((category) => (
              <option key={category.id} value={category.id}>
                {category.name}
              </option>
            ))}
          </select>
          {errors.category_id && (
            <p className="text-red-500 text-sm mt-1">{errors.category_id}</p>
          )}
        </div>

        <div className="mb-4">
          <label htmlFor="body" className="block font-medium mb-1">
            Content
          </label>
          <textarea
            id="body"
            value={data.body}
            onChange={(e) => setData('body', e.target.value)}
            rows={10}
            className="w-full border rounded px-3 py-2"
          />
          {errors.body && (
            <p className="text-red-500 text-sm mt-1">{errors.body}</p>
          )}
        </div>

        <div className="flex gap-4">
          <button
            type="submit"
            disabled={processing}
            className="px-4 py-2 bg-blue-600 text-white rounded disabled:opacity-50"
          >
            {processing ? 'Creating...' : 'Create Post'}
          </button>

          <Link
            href={route('posts.index')}
            className="px-4 py-2 border rounded"
          >
            Cancel
          </Link>
        </div>
      </form>
    </>
  )
}

// resources/js/Layouts/AppLayout.tsx
import { Link, usePage } from '@inertiajs/react'
import { ReactNode } from 'react'

interface Props {
  children: ReactNode
}

export default function AppLayout({ children }: Props) {
  const { auth } = usePage().props as { auth: { user: { name: string } } }

  return (
    <div className="min-h-screen bg-gray-100">
      <nav className="bg-white shadow">
        <div className="container mx-auto px-4 py-3 flex justify-between">
          <Link href="/" className="font-bold">
            My App
          </Link>
          <span>Welcome, {auth.user.name}</span>
        </div>
      </nav>

      <main className="container mx-auto px-4 py-8">
        {children}
      </main>
    </div>
  )
}

// resources/js/Pages/Dashboard.tsx
import AppLayout from '@/Layouts/AppLayout'

export default function Dashboard() {
  return <h1>Dashboard</h1>
}

// Assign persistent layout
Dashboard.layout = (page: ReactNode) => <AppLayout>{page}</AppLayout>

<?php

namespace App\Http\Controllers;

use App\Http\Requests\StorePostRequest;
use App\Models\Post;
use App\Models\Category;
use Illuminate\Http\RedirectResponse;
use Inertia\Inertia;
use Inertia\Response;

class PostController extends Controller
{
    public function index(): Response
    {
        return Inertia::render('Posts/Index', [
            'posts' => Post::with('author:id,name')
                ->latest()
                ->paginate(10),
            'filters' => request()->only('search'),
        ]);
    }

    public function create(): Response
    {
        return Inertia::render('Posts/Create', [
            'categories' => Category::all(['id', 'name']),
        ]);
    }

    public function store(StorePostRequest $request): RedirectResponse
    {
        $post = Post::create([
            ...$request->validated(),
            'user_id' => auth()->id(),
        ]);

        return redirect()
            ->route('posts.show', $post)
            ->with('success', 'Post created successfully.');
    }

    public function show(Post $post): Response
    {
        return Inertia::render('Posts/Show', [
            'post' => $post->load('author', 'category'),
        ]);
    }
}

共享数据 (HandleInertiaRequests)

<?php

namespace App\Http\Middleware;

use Illuminate\Http\Request;
use Inertia\Middleware;

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request): array
    {
        return array_merge(parent::share($request), [
            'auth' => [
                'user' => $request->user() ? [
                    'id' => $request->user()->id,
                    'name' => $request->user()->name,
                    'email' => $request->user()->email,
                ] : null,
            ],
            'flash' => [
                'success' => $request->session()->get('success'),
                'error' => $request->session()->get('error'),
            ],
        ]);
    }
}

// resources/js/Components/FlashMessages.tsx
import { usePage } from '@inertiajs/react'
import { useEffect, useState } from 'react'

export default function FlashMessages() {
  const { flash } = usePage().props as {
    flash: { success?: string; error?: string }
  }
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    if (flash.success || flash.error) {
      setVisible(true)
      const timer = setTimeout(() => setVisible(false), 3000)
      return () => clearTimeout(timer)
    }
  }, [flash])

  if (!visible) return null

  return (
    <div className="fixed top-4 right-4 z-50">
      {flash.success && (
        <div className="bg-green-500 text-white px-4 py-2 rounded shadow">
          {flash.success}
        </div>
      )}
      {flash.error && (
        <div className="bg-red-500 text-white px-4 py-2 rounded shadow">
          {flash.error}
        </div>
      )}
    </div>
  )
}

阅读各个规则文件以获取详细说明和代码示例：

rules/form-useform-basic.md
rules/page-props-typing.md
rules/layout-persistent.md

laravel-inertia-react/
├── SKILL.md                 # 本文件 - 概述和示例
├── README.md                # 快速参考指南
├── AGENTS.md                # AI 代理集成指南
├── metadata.json            # 技能元数据和引用
└── rules/
    ├── _sections.md         # 规则类别和优先级
    ├── _template.md         # 新规则模板
    ├── page-*.md            # 页面组件模式 (6 个规则)
    ├── form-*.md            # 表单处理模式 (8 个规则)
    ├── nav-*.md             # 导航模式 (5 个规则)
    ├── shared-*.md          # 共享数据模式 (4 个规则)
    └── layout-*.md          # 布局模式 (1 个规则)

Inertia.js 文档 - 官方 Inertia.js 文档
Laravel 文档 - Laravel 框架文档
React 文档 - 官方 React 文档
Ziggy - 用于 JavaScript 的 Laravel 路由助手

MIT 许可证。本技能按原样提供，用于教育和开发目的。

版本 : 1.0.1
最后更新 : 2026-01-17
维护者 : Asyraf Hussin
规则数量 : 6 个类别共 24 条规则
技术栈 : Laravel 10+, Inertia.js 1.0+, React 18+, TypeScript 5+

🇺🇸English

Laravel + Inertia.js + React

Comprehensive patterns for building modern monolithic applications with Laravel, Inertia.js, and React. Contains 30+ rules for seamless full-stack development.

When to Apply

Reference these guidelines when:

Creating Inertia page components
Handling forms with useForm hook
Managing shared data and authentication
Implementing persistent layouts
Navigating between pages

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Page Components	CRITICAL	`page-`
2	Forms & Validation	CRITICAL	`form-`
3	Navigation & Links	HIGH	`nav-`
4	Shared Data	HIGH	`shared-`
5	Layouts	MEDIUM	`layout-`
6	File Uploads	MEDIUM	`upload-`
7	Advanced Patterns	LOW	`advanced-`

Quick Reference

1. Page Components (CRITICAL)

page-props-typing - Type page props from Laravel
page-component-structure - Standard page component pattern
page-head-management - Title and meta tags with Head
page-default-layout - Assign layouts to pages

2. Forms & Validation (CRITICAL)

form-useform-basic - Basic useForm usage
form-validation-errors - Display Laravel validation errors
form-processing-state - Handle form submission state
form-reset-preserve - Reset vs preserve form data
form-nested-data - Handle nested form data
form-transform - Transform data before submit

3. Navigation & Links (HIGH)

nav-link-component - Use Link for navigation
nav-preserve-state - Preserve scroll and state
nav-partial-reloads - Reload only what changed
nav-replace-history - Replace vs push history

4. Shared Data (HIGH)

shared-auth-user - Access authenticated user
shared-flash-messages - Handle flash messages
shared-global-props - Access global props
shared-typescript - Type shared data

5. Layouts (MEDIUM)

layout-persistent - Persistent layouts pattern
layout-nested - Nested layouts
layout-default - Default layout assignment
layout-conditional - Conditional layouts

6. File Uploads (MEDIUM)

upload-basic - Basic file upload
upload-progress - Upload progress tracking
upload-multiple - Multiple file uploads

7. Advanced Patterns (LOW)

advanced-polling - Real-time polling
advanced-prefetch - Prefetch pages
advanced-modal-pages - Modal as pages
advanced-infinite-scroll - Infinite scrolling

Essential Patterns

Page Component with TypeScript

// resources/js/Pages/Posts/Index.tsx
import { Head, Link } from '@inertiajs/react'

interface Post {
  id: number
  title: string
  excerpt: string
  created_at: string
  author: {
    id: number
    name: string
  }
}

interface Props {
  posts: {
    data: Post[]
    links: { url: string | null; label: string; active: boolean }[]
  }
  filters: {
    search?: string
  }
}

export default function Index({ posts, filters }: Props) {
  return (
    <>
      <Head title="Posts" />

      <div className="container mx-auto py-8">
        <h1 className="text-2xl font-bold mb-6">Posts</h1>

        <div className="space-y-4">
          {posts.data.map((post) => (
            <article key={post.id} className="p-4 bg-white rounded-lg shadow">
              <Link href={route('posts.show', post.id)}>
                <h2 className="text-xl font-semibold hover:text-blue-600">
                  {post.title}
                </h2>
              </Link>
              <p className="text-gray-600 mt-2">{post.excerpt}</p>
              <p className="text-sm text-gray-400 mt-2">
                By {post.author.name}
              </p>
            </article>
          ))}
        </div>
      </div>
    </>
  )
}

Form with useForm

// resources/js/Pages/Posts/Create.tsx
import { Head, useForm, Link } from '@inertiajs/react'
import { FormEvent } from 'react'

interface Category {
  id: number
  name: string
}

interface Props {
  categories: Category[]
}

export default function Create({ categories }: Props) {
  const { data, setData, post, processing, errors, reset } = useForm({
    title: '',
    body: '',
    category_id: '',
  })

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault()
    post(route('posts.store'), {
      onSuccess: () => reset(),
    })
  }

  return (
    <>
      <Head title="Create Post" />

      <form onSubmit={handleSubmit} className="max-w-2xl mx-auto py-8">
        <div className="mb-4">
          <label htmlFor="title" className="block font-medium mb-1">
            Title
          </label>
          <input
            id="title"
            type="text"
            value={data.title}
            onChange={(e) => setData('title', e.target.value)}
            className="w-full border rounded px-3 py-2"
          />
          {errors.title && (
            <p className="text-red-500 text-sm mt-1">{errors.title}</p>
          )}
        </div>

        <div className="mb-4">
          <label htmlFor="category" className="block font-medium mb-1">
            Category
          </label>
          <select
            id="category"
            value={data.category_id}
            onChange={(e) => setData('category_id', e.target.value)}
            className="w-full border rounded px-3 py-2"
          >
            <option value="">Select a category</option>
            {categories.map((category) => (
              <option key={category.id} value={category.id}>
                {category.name}
              </option>
            ))}
          </select>
          {errors.category_id && (
            <p className="text-red-500 text-sm mt-1">{errors.category_id}</p>
          )}
        </div>

        <div className="mb-4">
          <label htmlFor="body" className="block font-medium mb-1">
            Content
          </label>
          <textarea
            id="body"
            value={data.body}
            onChange={(e) => setData('body', e.target.value)}
            rows={10}
            className="w-full border rounded px-3 py-2"
          />
          {errors.body && (
            <p className="text-red-500 text-sm mt-1">{errors.body}</p>
          )}
        </div>

        <div className="flex gap-4">
          <button
            type="submit"
            disabled={processing}
            className="px-4 py-2 bg-blue-600 text-white rounded disabled:opacity-50"
          >
            {processing ? 'Creating...' : 'Create Post'}
          </button>

          <Link
            href={route('posts.index')}
            className="px-4 py-2 border rounded"
          >
            Cancel
          </Link>
        </div>
      </form>
    </>
  )
}

Persistent Layout

// resources/js/Layouts/AppLayout.tsx
import { Link, usePage } from '@inertiajs/react'
import { ReactNode } from 'react'

interface Props {
  children: ReactNode
}

export default function AppLayout({ children }: Props) {
  const { auth } = usePage().props as { auth: { user: { name: string } } }

  return (
    <div className="min-h-screen bg-gray-100">
      <nav className="bg-white shadow">
        <div className="container mx-auto px-4 py-3 flex justify-between">
          <Link href="/" className="font-bold">
            My App
          </Link>
          <span>Welcome, {auth.user.name}</span>
        </div>
      </nav>

      <main className="container mx-auto px-4 py-8">
        {children}
      </main>
    </div>
  )
}

// resources/js/Pages/Dashboard.tsx
import AppLayout from '@/Layouts/AppLayout'

export default function Dashboard() {
  return <h1>Dashboard</h1>
}

// Assign persistent layout
Dashboard.layout = (page: ReactNode) => <AppLayout>{page}</AppLayout>

Laravel Controller

<?php

namespace App\Http\Controllers;

use App\Http\Requests\StorePostRequest;
use App\Models\Post;
use App\Models\Category;
use Illuminate\Http\RedirectResponse;
use Inertia\Inertia;
use Inertia\Response;

class PostController extends Controller
{
    public function index(): Response
    {
        return Inertia::render('Posts/Index', [
            'posts' => Post::with('author:id,name')
                ->latest()
                ->paginate(10),
            'filters' => request()->only('search'),
        ]);
    }

    public function create(): Response
    {
        return Inertia::render('Posts/Create', [
            'categories' => Category::all(['id', 'name']),
        ]);
    }

    public function store(StorePostRequest $request): RedirectResponse
    {
        $post = Post::create([
            ...$request->validated(),
            'user_id' => auth()->id(),
        ]);

        return redirect()
            ->route('posts.show', $post)
            ->with('success', 'Post created successfully.');
    }

    public function show(Post $post): Response
    {
        return Inertia::render('Posts/Show', [
            'post' => $post->load('author', 'category'),
        ]);
    }
}

Shared Data (HandleInertiaRequests)

<?php

namespace App\Http\Middleware;

use Illuminate\Http\Request;
use Inertia\Middleware;

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request): array
    {
        return array_merge(parent::share($request), [
            'auth' => [
                'user' => $request->user() ? [
                    'id' => $request->user()->id,
                    'name' => $request->user()->name,
                    'email' => $request->user()->email,
                ] : null,
            ],
            'flash' => [
                'success' => $request->session()->get('success'),
                'error' => $request->session()->get('error'),
            ],
        ]);
    }
}

Flash Messages Component

// resources/js/Components/FlashMessages.tsx
import { usePage } from '@inertiajs/react'
import { useEffect, useState } from 'react'

export default function FlashMessages() {
  const { flash } = usePage().props as {
    flash: { success?: string; error?: string }
  }
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    if (flash.success || flash.error) {
      setVisible(true)
      const timer = setTimeout(() => setVisible(false), 3000)
      return () => clearTimeout(timer)
    }
  }, [flash])

  if (!visible) return null

  return (
    <div className="fixed top-4 right-4 z-50">
      {flash.success && (
        <div className="bg-green-500 text-white px-4 py-2 rounded shadow">
          {flash.success}
        </div>
      )}
      {flash.error && (
        <div className="bg-red-500 text-white px-4 py-2 rounded shadow">
          {flash.error}
        </div>
      )}
    </div>
  )
}

How to Use

Read individual rule files for detailed explanations and code examples:

rules/form-useform-basic.md
rules/page-props-typing.md
rules/layout-persistent.md

Project Structure

laravel-inertia-react/
├── SKILL.md                 # This file - overview and examples
├── README.md                # Quick reference guide
├── AGENTS.md                # Integration guide for AI agents
├── metadata.json            # Skill metadata and references
└── rules/
    ├── _sections.md         # Rule categories and priorities
    ├── _template.md         # Template for new rules
    ├── page-*.md            # Page component patterns (6 rules)
    ├── form-*.md            # Form handling patterns (8 rules)
    ├── nav-*.md             # Navigation patterns (5 rules)
    ├── shared-*.md          # Shared data patterns (4 rules)
    └── layout-*.md          # Layout patterns (1 rule)

References

Inertia.js Documentation - Official Inertia.js docs
Laravel Documentation - Laravel framework docs
React Documentation - Official React docs
Ziggy - Laravel route helper for JavaScript

License

MIT License. This skill is provided as-is for educational and development purposes.

Metadata

Version : 1.0.1
Last Updated : 2026-01-17
Maintainer : Asyraf Hussin
Rule Count : 24 rules across 6 categories
Tech Stack : Laravel 10+, Inertia.js 1.0+, React 18+, TypeScript 5+

Weekly Installs

278

Repository

asyrafhussin/ag…t-skills

GitHub Stars

First Seen

Jan 24, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

github-copilot227

codex226

opencode224

gemini-cli224

amp192

kimi-cli191

PHP 8.x 最佳实践指南：51条规则掌握现代PHP开发、PSR标准与SOLID原则

984 周安装

Laravel Inertia React 全栈开发指南：30+规则构建现代单体应用

🇨🇳中文介绍

Laravel + Inertia.js + React

何时应用

按优先级划分的规则类别

相关 Skills

快速参考

1. 页面组件 (关键)

2. 表单与验证 (关键)

3. 导航与链接 (高)

4. 共享数据 (高)

5. 布局 (中)

6. 文件上传 (中)

7. 高级模式 (低)

核心模式

使用 TypeScript 的页面组件

使用 useForm 的表单

持久化布局

Laravel 控制器

共享数据 (HandleInertiaRequests)

闪存消息组件

如何使用

项目结构

参考

许可证

元数据

🇺🇸English

Laravel + Inertia.js + React

When to Apply

Rule Categories by Priority

Quick Reference

1. Page Components (CRITICAL)

2. Forms & Validation (CRITICAL)

3. Navigation & Links (HIGH)

4. Shared Data (HIGH)

5. Layouts (MEDIUM)

6. File Uploads (MEDIUM)

7. Advanced Patterns (LOW)

Essential Patterns

Page Component with TypeScript

Form with useForm

Persistent Layout

Laravel Controller

Shared Data (HandleInertiaRequests)

Flash Messages Component

How to Use

Project Structure

References

License

Metadata

最新 Skills