Fivem Nextjs Boilerplate

Overview

The FiveM NUI NextJS Boilerplate is a tool that allows users to quickly get started with the right tools for their FiveM UI development. This boilerplate provides features such as Typescript, NextJS 14, Next-themes, Tailwindcss, and Redux Toolkit. It also includes instructions on how to integrate it with FiveM and deploy it via Vercel or manually.

Features

• Typescript: Utilize the benefits of static typing and improved tooling with Typescript.
• NextJS 14: Make use of the latest features and improvements in NextJS for your UI development.
• Next-themes: Easily implement theming functionality in your UI using Next-themes.
• Tailwindcss: Take advantage of the utility-first CSS framework, Tailwindcss, for quicker styling.
• Redux Toolkit: Use Redux Toolkit for state management in your UI.

Installation

To get started with the FiveM NUI NextJS Boilerplate, follow these steps:

FiveM Resource

1. Clone this repository or download it as a zip file.
2. Extract the zip file (if downloaded as a zip file).
3. Move the folder fivem-nextjs-example to your resources folder.
4. Add ensure fivem-nextjs-example to your server.cfg file.
5. Update ui_page url in fxmanifest.lua to your UI deployment url.
6. Edit config.lua to your liking.
7. Start your server.

NextJS UI

• Deploy via Vercel:
  1. Create a new repository from the template button (upper right corner).
  2. Create a new project on vercel.com/new.
  3. Connect your Github repository to Vercel.
  4. Add the environment variables from .env in the Vercel dashboard.
  5. Deploy your project.
  6. Update ui_page url in fxmanifest.lua to your UI deployment url.
  7. Start your server.
• Deploy manually:
  1. Clone this repository or download it as a zip file.
  2. Extract the zip file (if downloaded as a zip file).
  3. Go to the ui folder.
  4. Run npm install or yarn install or pnpm install to install the dependencies.
  5. Run npm run build or yarn build or pnpm build to build the project.
  6. Run npm run start or yarn start or pnpm start to start the project.
  7. Update ui_page url in fxmanifest.lua to your UI deployment url.
  8. Start your server.

Summary

The FiveM NUI NextJS Boilerplate is a helpful tool for developers looking to quickly start their FiveM UI development. With features such as Typescript, NextJS 14, Next-themes, Tailwindcss, and Redux Toolkit, it provides a powerful foundation for creating UIs in FiveM. The boilerplate also offers instructions for integrating with FiveM and deploying the UI either via Vercel or manually. Overall, this boilerplate streamlines the initial setup process and offers a solid starting point for UI development in FiveM.