1.- Primeros pasos

Vamos a comenzar con la creación de un proyecto en laravel para la Api Backend

    composer create-project laravel/laravel:^8.0 example-app

Instalar laravel Breeze and dependecies...

Durante la instalación, Breeze agregará una FRONTEND_URLvariable de entorno al .envarchivo de su aplicación. Esta URL debe ser la URL de su aplicación JavaScript. Esto será típicamente http://localhost:3000durante el desarrollo local.

    composer require laravel/breeze:1.9.2

Ir a phpMyadmin y crear la base de datos con el mismo nombre que está en el archivo .env

    php artisan migrate

Sí tienen problemas con la Api en Windows continue con estos pasos

Próximo

• Asegúrese de que las variables de su aplicación APP_URL estén establecidas respectivamente. FRONTEND_URL http://localhost:8000 http://localhost:3000

• En app/Providers/RouteServiceProvider.php, actualizar: public const HOME = '/';

• En app/Http/Middleware/Authenticate.php, actualizar:

    protected function redirectTo($request)
    {
    if (! $request->expectsJson()) {
        return config('app.frontend_url').'/login?next_to='.urlencode($request->url());
    }
    }

• En app/Http/Middleware/RedirectIfAuthenticated.php, actualizar:

    public function handle(Request $request, Closure $next, ...$guards)
    {
    $guards = empty($guards) ? [null] : $guards;

    foreach ($guards as $guard) {
        if (Auth::guard($guard)->check()) {
            return redirect(config('app.frontend_url').RouteServiceProvider::HOME);
        }
    }

    return $next($request);
    }

• En confing/cors.php, actualizar:

    <?php

    $frontedUrl = env('FRONTEND_URL', '*');

    if ($frontedUrl !== '*') {
        $parsed = parse_url($frontedUrl);
        $frontedUrl = sprintf(
            '%s://%s%s',
            $parsed['scheme'],
            $parsed['host'],
            isset($parsed['port']) ? ':' . $parsed['port'] : ''
        );
    }

    return [

        /*
        |--------------------------------------------------------------------------
        | Cross-Origin Resource Sharing (CORS) Configuration
        |--------------------------------------------------------------------------
        |
        | Here you may configure your settings for cross-origin resource sharing
        | or "CORS". This determines what cross-origin operations may execute
        | in web browsers. You are free to adjust these settings as needed.
        |
        | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
        |
        */

        'paths' => ['*'],

        'allowed_methods' => ['*'],

        'allowed_origins' => [$frontedUrl],

        'allowed_origins_patterns' => [],

        'allowed_headers' => ['*'],

        'exposed_headers' => [],

        'max_age' => 0,

        'supports_credentials' => true,

    ];

Después de definir las variables de entorno apropiadas y actualizar varios códigos anteriores, puede servir la aplicación Laravel usando

    # server the application
    php artisan serve

Implementación de referencia para Next.js en el frontend

Finalmente, está listo para emparejar este backend con el frontend de su elección. Una implementación de referencia de Next de la interfaz Breeze está disponible en GitHub (opens new window) .

Este repositorio es una implementación de la interfaz del kit de inicio de autenticación/aplicación Laravel Breeze en Next.js. Toda la plantilla de autenticación ya está escrita para usted, impulsada por Laravel Sanctum , lo que le permite comenzar a emparejar rápidamente su hermoso frontend Next.js con un poderoso backend de Laravel.

A continuación, clone este repositorio e instale sus dependencias con yarn installo npm install. Luego, copie el .env.examplearchivo .env.localy proporcione la URL de su backend:

    NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

Finalmente, ejecute la aplicación a través de npm run dev. La aplicación estará disponible en http://localhost:3000:

    npm run dev

WARNING

Nota: Actualmente, recomendamos usar localhostdurante el desarrollo local de su backend y frontend para evitar problemas de "mismo origen" de CORS.