breeze next

Laravel Breeze - Next.JS Edition ▲

Introdução

Este repositório é uma implementação do Frontend do Kit Starter Application / Authentication Application / Authentication em Next.JS. Todo o Boilerplate de autenticação já está escrito para você - alimentado por Laravel Santum, permitindo que você comece rapidamente a emparelhar seu belo próximo.

Documentação oficial

Instalação

Primeiro, crie um back -end do próximo.js compatível com o Laravel, instalando o Laravel Breeze em um novo aplicativo Laravel e instalando o andaimes da Breeze:

 # Create the Laravel application...
laravel new next-backend

cd next-backend

# Install Breeze and dependencies...
composer require laravel/breeze --dev

php artisan breeze:install api

# Run database migrations...
php artisan migrate

Em seguida, verifique se as variáveis de ambiente APP_URL e FRONTEND_URL do seu aplicativo estão definidas como http://localhost:8000 e http://localhost:3000 , respectivamente.

Depois de definir as variáveis de ambiente apropriadas, você pode servir o aplicativo Laravel usando o comando artesão serve :

 # Serve the application...
php artisan serve

Em seguida, clone este repositório e instale suas dependências com yarn install ou npm install . Em seguida, copie o arquivo .env.example para .env.local e forneça o URL do seu back -end:

 NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

Finalmente, execute o aplicativo via npm run dev . O aplicativo estará disponível em http://localhost:3000 :

 npm run dev

NOTA: Atualmente, recomendamos o uso de localhost durante o desenvolvimento local do seu back-end e front-end para evitar problemas de "origem da mesma origem" do CORS.

Gancho de autenticação

Este aplicativo Next.js contém um gancho de React useAuth personalizado, projetado para abstrair toda a lógica de autenticação de suas páginas. Além disso, o gancho pode ser usado para acessar o usuário atualmente autenticado:

 const ExamplePage = ( ) => {
    const { logout , user } = useAuth ( { middleware : 'auth' } )

    return (
        < >
            < p > { user ?. name } </ p >

            < button onClick = { logout } > Sign out </ button >
        </ >
    )
}

export default ExamplePage

Nota: Você precisará usar o encadeamento opcional ( user?.name em vez de user.name ) ao acessar as propriedades no objeto do usuário para explicar a renderização inicial do lado do servidor do Next.JS.

Rotas nomeadas

Por conveniência, o Ziggy pode ser usado para fazer referência aos URLs de rota nomeados do seu aplicativo Laravel no seu aplicativo React.

Contribuindo

Obrigado por considerar contribuir para a Breeze a seguir! O guia de contribuição pode ser encontrado na documentação do Laravel.

Código de Conduta

Para garantir que a comunidade de Laravel seja acolhedora a todos, revise e cumpra o Código de Conduta.

Vulnerabilidades de segurança

Revise nossa política de segurança sobre como relatar vulnerabilidades de segurança.

Licença

O Laravel Breeze Next é o software de código aberto licenciado sob a licença do MIT.