Are you ready to dive into the exhilarating world of Solana Dapp development? Whether your goal is to fetch NFTs from the blockchain or to enhance your existing Anchor application with a robust UI, this guide will lead you through using an efficient boilerplate that integrates React.js, Next.js, and deployment to the Vercel Platform in just minutes!
Demo
Check out this remarkable demo of a Solana Dapp: Demo
Project Components
This project leverages a variety of cutting-edge tools, including:
- Next.js
- TypeScript
- Solana Wallet Adapter and Solana Web3.js for blockchain interactions
- Tailwind CSS, enhanced with daisyUI
Getting Started
To kick off your development journey, run the local development server with the following command:
bash
yarn
yarn run dev
If you make any changes to your Candy Machine, remember to update your UI configuration in .src/config/candy-machine.config.js.
Styling Your App
Rapid styling is feasible through either Tailwind CSS or daisyUI. Easily adjust themes by changing the daisy.themes within .tailwind.config.js. If you’re looking for more information, explore the detailed documentation on the daisyUI site.
This application promotes the use of CSS Modules over other styling techniques (like SASSLESS, Styled Components, or regular CSS). Its modular nature supports modern CSS, and you can read more on the Next.js documentation.
If you wish to incorporate LESS, an example code is available in .next.config.js.
Deploying on Vercel
Before deploying, ensure your app can build successfully on Vercel by running:
npm run build
Connect your Vercel account with GitHub, and Vercel will create an environment and deployment for you. From this point onwards, any push to the main branch will automatically trigger a rebuild and redeployment of the app!
Troubleshooting
While deploying on Vercel, you might encounter a common issue: the Routes Manifest Could Not Be Found error. This can often be resolved by overwriting the default output directory as described in this GitHub issue.
For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.
Templates Included
This boilerplate comes with useful templates that can jumpstart your project:
- NFT Gallery Template
- UI for Anchor app (You can base it on this tutorial)
At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.