{"id":26142310,"url":"https://github.com/omikkel/fivem-nextjs-boilerplate","last_synced_at":"2025-04-14T01:52:43.999Z","repository":{"id":188713121,"uuid":"531691674","full_name":"OMikkel/fivem-nextjs-boilerplate","owner":"OMikkel","description":"NextJS/FiveM Boilerplate (Typescript, Tailwindcss, Redux Toolkit, DaisyUI)","archived":false,"fork":false,"pushed_at":"2024-05-10T03:16:10.000Z","size":189,"stargazers_count":14,"open_issues_count":1,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-14T01:52:37.589Z","etag":null,"topics":["daisyui","fivem","next-themes","nextjs","nextjs-boilerplate","redux-toolkit","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://fivem-nextjs-boilerplate.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OMikkel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-01T21:28:05.000Z","updated_at":"2025-02-25T12:09:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"752ba2bc-de54-42cf-a0e7-37d19234f26a","html_url":"https://github.com/OMikkel/fivem-nextjs-boilerplate","commit_stats":null,"previous_names":["omikkel/nextjs-omikkel-boilerplate","omikkel/fivem-nextjs-boilerplate"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OMikkel%2Ffivem-nextjs-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OMikkel%2Ffivem-nextjs-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OMikkel%2Ffivem-nextjs-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OMikkel%2Ffivem-nextjs-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OMikkel","download_url":"https://codeload.github.com/OMikkel/fivem-nextjs-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248809032,"owners_count":21164895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["daisyui","fivem","next-themes","nextjs","nextjs-boilerplate","redux-toolkit","tailwindcss","typescript"],"created_at":"2025-03-11T03:48:16.145Z","updated_at":"2025-04-14T01:52:43.972Z","avatar_url":"https://github.com/OMikkel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FiveM NUI NextJS Boilerplate - Get started quickly with the right tools\n\nClick this button to create a new repository based on this template.\n\n[![Use this template](https://img.shields.io/badge/-Use%20this%20template-blue?style=for-the-badge)](https://github.com/new?template_name=fivem-nextjs-boilerplate\u0026template_owner=OMikkel)\n\nContact me: https://omikkel.com/discord\n\n## Features\n\n- Typescript - \u003chttps://www.typescriptlang.org/\u003e\n- NextJS 14 - \u003chttps://nextjs.org/\u003e\n- Next-themes - \u003chttps://www.npmjs.com/package/next-themes\u003e\n- Tailwindcss - \u003chttps://tailwindcss.com/\u003e\n- Redux Toolkit - \u003chttps://redux-toolkit.js.org/\u003e\n- FiveM Integration\n\n## ⚠️ Important \n\nIf you choose to rename the folder `fivem-nextjs-example` to something else, make sure to update the `NEXT_PUBLIC_RESOURCE_NAME` in the [`.env`](/ui/.env) file. in the `ui` folder\n\nIf you are using vercel to deploy your ui, make sure to update the environment variables in the vercel dashboard\n\n## Getting Started\n\n### FiveM Resource\n\n1. Clone this repository or download it as a zip file.\n2. Extract the zip file (if you downloaded it as a zip file).\n3. Move the folder `fivem-nextjs-example` to your resources folder.\n4. Add `ensure fivem-nextjs-example` to your `server.cfg` file.\n5. Update ui_page url in `fxmanifest.lua` to your ui deployment url\n6. Edit `config.lua` to your liking.\n7. Start your server.\n\n### NextJS UI\n\n#### Deploy via Vercel\n\n1. Create a new repository from the template button (upper right corner)\n2. Create a new project on https://vercel.com/new\n3. Connect your github repository to vercel\n4. Add the environment variables from [`.env`](/ui/.env) in the vercel dashboard\n5. Deploy your project\n6. Update ui_page url in `fxmanifest.lua` to your ui deployment url\n7. Start your server.\n\n#### Deploy manually\n\n1. Clone this repository or download it as a zip file.\n2. Extract the zip file (if you downloaded it as a zip file).\n3. Go to the `ui` folder.\n4. Run `npm install` or `yarn install` or `pnpm install` to install the dependencies.\n5. Run `npm run build` or `yarn build` or `pnpm build` to build the project.\n6. Run `npm run start` or `yarn start` or `pnpm start` to start the project.\n7. Update ui_page url in `fxmanifest.lua` to your ui deployment url\n8. Start your server.\n\n## Usage\n\nJoin your server and press the hotkey (default: `H`) to open the menu.\n\n## Learn More about NextJS\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## How does it work?\n\n### Send data to the UI from FiveM Client\n\n#### FiveM Client\n\n```lua\n-- client.lua\nSendNUIMessage({\n    type = \"app/setDisplay\", -- Redux type sliceName/reducer\n    data = true/false, -- Redux payload\n})\n```\n\n#### UI\n\n```js\n// state/reducers/app.ts\nconst appSlice = createSlice({\n    name: \"app\", // sliceName\n    initialState,\n    reducers: {\n        // reducer\n        setDisplay: (state, action: PayloadAction\u003cboolean\u003e) =\u003e {\n             state.display = action.payload; // action.payload is the data from the FiveM client\n        },\n    },\n});\n```\n\n### Get data from the FiveM Client\n\n#### UI\n\n```js\n// app/page.tsx\nconst getPlayerCount = () =\u003e {\n    // Call FiveM client\n    nuiCallback(\"/getPlayerCount\", {}, (result: number) =\u003e {\n        setPlayerCount(result); // Set React state\n    });\n};\n```\n\n#### FiveM Client\n\n```lua\n-- client.lua\nRegisterNUICallback(\"getPlayerCount\", function(data, cb)\n    TriggerServerEvent(cfg.resourceName..\":getPlayerCount\") -- Ask server for data\n    RegisterNetEvent(cfg.resourceName..\":getPlayerCount\")\n    AddEventHandler(cfg.resourceName..\":getPlayerCount\", function(count)\n        cb(count) -- Send server response back to ui\n    end)\nend)\n```\n\n```lua\n-- server.lua\nRegisterServerEvent(cfg.resourceName..\":getPlayerCount\")\nAddEventHandler(cfg.resourceName..\":getPlayerCount\", function()\n    TriggerClientEvent(cfg.resourceName..\":getPlayerCount\", source, GetNumPlayerIndices()) -- Respond to client with player count\nend)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomikkel%2Ffivem-nextjs-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fomikkel%2Ffivem-nextjs-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomikkel%2Ffivem-nextjs-boilerplate/lists"}