{"id":13408652,"url":"https://github.com/xdevguild/nextjs-dapp-template","last_synced_at":"2025-03-14T13:31:49.313Z","repository":{"id":37009508,"uuid":"492348021","full_name":"xdevguild/nextjs-dapp-template","owner":"xdevguild","description":"Open source Next.js app template for the MultiversX blockchain. Including Shadcn UI and Tailwind.","archived":false,"fork":false,"pushed_at":"2024-07-13T21:45:58.000Z","size":1868,"stargazers_count":47,"open_issues_count":1,"forks_count":16,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-07-31T20:31:35.006Z","etag":null,"topics":["blockchain","elrond","elrond-dapp","javascript","multiversx","multiversx-dapp","nextjs","react","reactjs","shadcn-ui","tailwind"],"latest_commit_sha":null,"homepage":"https://multiversx-nextjs-dapp.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xdevguild.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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-05-14T23:45:56.000Z","updated_at":"2024-07-13T21:37:32.000Z","dependencies_parsed_at":"2023-09-28T18:22:45.496Z","dependency_job_id":"1cdde1e2-79cc-49e7-9e64-225b1775978a","html_url":"https://github.com/xdevguild/nextjs-dapp-template","commit_stats":null,"previous_names":[],"tags_count":53,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xdevguild%2Fnextjs-dapp-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xdevguild%2Fnextjs-dapp-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xdevguild%2Fnextjs-dapp-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xdevguild%2Fnextjs-dapp-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xdevguild","download_url":"https://codeload.github.com/xdevguild/nextjs-dapp-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243584378,"owners_count":20314748,"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":["blockchain","elrond","elrond-dapp","javascript","multiversx","multiversx-dapp","nextjs","react","reactjs","shadcn-ui","tailwind"],"created_at":"2024-07-30T20:00:54.358Z","updated_at":"2025-03-14T13:31:47.860Z","avatar_url":"https://github.com/xdevguild.png","language":"TypeScript","readme":"### NextJS Dapp Template\n\n- [multiversx-nextjs-dapp.netlify.com](https://multiversx-nextjs-dapp.netlify.com)\n\nNextjs alternative to the [sdk-dapp](https://github.com/multiversx/mx-sdk-dapp).\n\nThe Dapp is built using Nextjs and a couple of helpful tools ([Shadcn UI](https://ui.shadcn.com/) ([Radix UI](https://www.radix-ui.com/)) + [Tailwind](https://tailwindcss.com/))\nIt has straightforward and complete functionality.\n\n**For older Chakra UI version and Next.js Page Router architecture check the [v8.4.0](https://github.com/xdevguild/nextjs-dapp-template/tree/v8.4.0)**\n\n### Main assumption for the dapp:\n\n- it works with Next.js and new App Router architecture\n- it uses [sdk-core](https://github.com/multiversx/mx-sdk-js-core) **without** the [dapp-core](https://github.com/multiversx/mx-sdk-dapp) library. All through [useElven](https://www.useElven.com) library.\n- it uses the .env file - there is an example in the repo (for all configurations, also for the demo config)\n- it uses [Radix UI](https://www.radix-ui.com/) + [Tailwind](https://tailwindcss.com/), wrapped with [Shadcn UI](https://ui.shadcn.com/)\n\n### How to start it locally:\n\n`npx buildo-begins@latest init` - from the list, choose Next.js dapp template.\n\nOr you can also do this manually:\n1. clone or download the repo\n2. `cd nextjs-dapp-template`\n3. `npm install`\n4. configure .env.local (you can copy the contents of the .env.example) `cp .env.example .env.local`\n5. `npm run dev` -\u003e for development\n6. `npm run build` -\u003e `npm start` for production\n\nCheck how to deploy a very similar dapp using the Netlify services: https://www.elven.tools/docs/dapp-deployment.html\n\n### Howto\n\nBelow you will find the list of most essential utilities, hooks, and components with examples that are actual code from the template. You can search them in the code to better understand how they work.\n\nThere are much more hooks and tools, but most of them are already used in the ones listed below.\n\nThe code samples are not ready to copy and paste. Please search for them in the code.\n\n### @useelven/hooks\n\nThe template is based on `@useelven/core` npm library.\n\n- [@useelven/hooks docs](https://www.useElven.com) - React hooks for MultiversX blockchain\n\nBesides that, there are custom React components that will help you with development.\n\n#### LoginModalButton\n\nThe component provides the `Connect` button with the modal, which will contain another three buttons for four different authentication possibilities (xPortal Mobile App, MultiversX Defi Wallet - browser extension, MultiversX Web Wallet). You should be able to use it in any place on the website.\n\n```jsx\nimport { LoginModalButton } from '../tools/LoginModalButton';\n\n\u003cLoginModalButton /\u003e;\n```\n\n#### Authenticated\n\nThe component is used as a small wrapper where we need to be in the authenticated context, for example, for all transactions.\n\nIt can display the spinner and also the fallback React element.\n\n**Important** Do not wrap it in big sections of the code. Its purpose is to be used multiple times on as small blocks as possible.\n\n```jsx\n\u003cAuthenticated\n  spinnerCentered\n  fallback={\n    \u003cdiv className=\"font-bold text-2xl text-center mt-8\"\u003e\n      Connect your wallet!\n    \u003c/div\u003e\n  }\n\u003e\n```\n\n### ProtectedPageWrapper\n\nThe component wraps your page contents and will display them only for logged-in users. Otherwise, it will redirect to a defined path. Remember that this is only a client-side check. So don't rely on it with the data that should be private and secured.\n\n```jsx\nimport { ProtectedPageWrapper } from './components/tools/ProtectedPageWrapper';\n\nconst Profile = () =\u003e {\n  return (\n    \u003cProtectedPageWrapper\u003e\n      \u003cdiv\u003eThe content for logged-in only!\u003c/div\u003e\n      \u003cdiv\u003eFor example the profile page or any other that should be accessible only for logged-in users\u003c/div\u003e\n    \u003c/ProtectedPageWrapper\u003e\n  );\n};\n\nexport default Profile;\n```\n\n### Working with the API\n\nBy default, the Dapp provides the `.env.example`, configured to use the official public MultiversX API endpoint. \n\nYou can use the public API, but it is always recommended to maintain your own instance of the API, or you can also use some third party services.\n\n### Working with the .env and config files\n\nThere is an `env.example` file that you can copy and rename into `.env.local` to run the app locally. You would need to configure these variables for your production-ready dapp.\n\nHere are all variables:\n\n```bash\n# =============================================\n# Public variables (exposed on the frontend)\n# =============================================\n\n# MultiversX chain (can be devnet, testnet, mainnet)\nNEXT_PUBLIC_MULTIVERSX_CHAIN = devnet\n\n# Wallet Connect 2 Project Id. This one will work only with this project\n# Get yours at: https://cloud.walletconnect.com/sign-in\nNEXT_PUBLIC_WC_PROJECT_ID = be161e9c2764269adc6a5cf4304c3a22\n\n# This is basically the main domain of your dapp\nNEXT_PUBLIC_DAPP_HOST = http://localhost:3000\n\n# =============================================\n# Public variables for the demo only\n# =============================================\n\n# The wallet address used for the demo EGLD transaction on the devnet\nNEXT_PUBLIC_TRANSFER_ADDRESS = erd17a4wydhhd6t3hhssvcp9g23ppn7lgkk4g2tww3eqzx4mlq95dukss0g50f\n\n# The smart contract address used for minting the NFT token (as example deployed Elven Tools Smart Contract)\nNEXT_PUBLIC_MINT_SMART_CONTRACT_ADDRESS = erd1qqqqqqqqqqqqqpgqztp5vpqrxe2tha224jwsa3sv2800a88zgtksar2kc8\n\n# The function/endpoint name for minting on the smart contract\nNEXT_PUBLIC_MINT_FUNCTION_NAME = mint\n\n# The function/view name for getting the total tokens left to be mint on smart contract\nNEXT_PUBLIC_QUERY_FUNCTION_NAME = getTotalTokensLeft\n\n# The payment per one NFT token, defined on smart contract (0.01 EGLD)\nNEXT_PUBLIC_MINT_PAYMENT_PER_TOKEN = 0.01\n\n# The amount of EGLD to send in the demo transfer (0.001 EGLD)\nNEXT_PUBLIC_EGLD_TRANSFER_AMOUNT = 0.001\n\n```\n\nAll variables which start with `NEXT_PUBLIC_` will be readable on the frontend side of the dapp. So please don't use them for any secret keys and data. If you need something to be available only on the backend side, don't use the `NEXT_PUBLIC_` prefix.\n\nYou can set up the chain type. Use `NEXT_PUBLIC_MULTIVERSX_CHAIN` to set `devnet`, `testnet` or `mainnet`.\n\nEach hosting provider will have a different way of setting the env variables. We will take a look at how Netlify is doing that below.\n\n### Deployment\n\nFor deployment, we recommend the [Netlify](https://www.netlify.com/). Why Netlify? Because it is the simplest way to deploy the Nextjs app for free. Of course, the most recommended is the [Vercel](https://vercel.com/) which you could also try.\n\nAs for Netlify, the only what you need to do there is to go to the settings and configure from which repository the app should be deployed. Check out how: [Netlify getting started](https://docs.netlify.com/get-started/).\n\nThen fill up the env variables. See how here: [Netlify env vars setup](https://docs.netlify.com/configure-builds/environment-variables).\n\nOn each repository code push, the Netlify services will redeploy the app.\n\nRead more about it here: https://www.elven.tools/docs/dapp-deployment.html\n\nHere are other deployment solutions: [NextJS Deployment](https://nextjs.org/docs/deployment).\n\n### Other tools\n\nIf you would like to test other templates check:\n\n- [erd-next-starter](https://github.com/Elrond-Giants/erd-next-starter)\n- [dapp-template](https://github.com/multiversx/mx-template-dapp)\n\nCompact MultiversX SDK for browsers (no build steps required)\n\n- [Elven.js](https://www.elvenjs.com)\n\nTools that can help you with interactions:\n\n- [Buildo.dev](https://www.buildo.dev)\n- [Buildo Begins](https://github.com/xdevguild/buildo-begins)\n- [Elven Tools](https://www.elven.tools)\n\n### Contact\n\n- [julian.io](https://www.julian.io)\n","funding_links":[],"categories":["Boilerplates \u0026 Starters","MultiversX community"],"sub_categories":["SDKs and dev tools"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxdevguild%2Fnextjs-dapp-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxdevguild%2Fnextjs-dapp-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxdevguild%2Fnextjs-dapp-template/lists"}