niclas-timmniclas-timm
317

Laravel Nextjs Starter

screenshot of Laravel Nextjs Starter

A Starter Kit for applications with Laravel as the API and NextJS for the Frontend

Github

Overview

The Laravel Next.js Starter Kit is a pre-configured bundle of Laravel 8 API and Next.js 10 frontend, aimed at simplifying the process of hooking up the backend and frontend for modern web applications. This starter kit includes all the basic features required for the development of web apps, such as authentication, protected routes, Google Tag Manager support, and customizable React components. It also offers TypeScript support, Dockerization, and flexible customization options through .env files.

Features

  • Backend and Frontend Integration: Provides hooks for connecting the backend (Laravel) and frontend (Next.js) with configurations like CORS, settings, and default base URLs.
  • Laravel Sanctum for Authentication: Offers authentication functionality for API routes on the backend using Laravel Sanctum.
  • Full Authentication Functionality on Frontend: Includes features like registration, login, email verification, and password restoration on the frontend.
  • Protected Frontend Routes: Allows the creation of protected frontend routes without page flashing.
  • Redux: Integration with Redux for state management.
  • Google Tag Manager Support: Allows integration with Google Tag Manager for tracking and analyzing user behavior.
  • Default React Components: A set of reusable default React components for building frontend interfaces.
  • Tailwind CSS: Utilizes Tailwind CSS for flexible and customizable UI design.
  • Flexible Customization Options: Configuration options for customizing the application through .env files.
  • User Roles: Supports defining user roles for different levels of access and permissions.
  • TypeScript Support: Full support for TypeScript in both backend and frontend code.
  • Dockerization: Provides Dockerized environment with custom bash scripts for easy setup and management of development environment, including XDebug, PhpMyAdmin, and Redis.

Backend Settings

  1. Navigate to the root directory of the project.
  2. Copy the .env.example file and rename it to .env.
  3. Open the .env file and fill in the required values.
    • Replace the XXXXXXXXXXXXXXXX values with your own values.
    • Adjust the SANCTUM_STATEFUL_DOMAINS variable if needed.
    • Modify other settings according to your requirements.
  4. If you're running the frontend on the default URL and port (http://localhost:3000), no further changes are necessary.
  5. If you're using Dockerization, most settings are prepopulated correctly in the .env.example file.
  6. Update the email settings in the .env file if needed.

Frontend Settings

  1. Open the frontend codebase in Next.js.
  2. Update the backend URL in the configuration files to match your backend setup.
  3. Verify other frontend settings and customize them as per your requirements.

Summary

The Laravel Next.js Starter Kit is a comprehensive bundle that combines the power of Laravel and Next.js to simplify the process of building modern web applications. With its pre-configured backend and frontend integration, full authentication functionality, user roles, and support for TypeScript, this starter kit allows developers to focus on developing the unique parts of their application without worrying about boilerplate code. The inclusion of Dockerization and flexible customization options further enhances the development experience.