Next Js Template
The Nextjs template is a Next.js project bootstrapped with create-next-app
.
CartDevkit support Nextjs boilerplate template with TailwindCSS and ChakraUI. This is a starter kit with no additional boilerplate code. It's a perfect starter kit to get your project started on Cartesi.
When working on the frontend, here are the required steps:
Navigate into the frontend project directory
Install all required dependencies using either
npm i
oryarn install
Environment Variables
Once you generate the frontend template, ensure to create a .env
file and provide your project Id as it's an important requirement when working with Rainbowkit and wagmi.
Your .env
file should look like this 👇
If you are not working on localhost, replace the values here to match with your deployed urls and the correct RPC url obtained from any of the node service providers of your choice. You can obtain your WALLET_CONNECT_PROJECT_ID from here.
Start up the local server using the below command.
Note
If you deployed to testnet or mainnet. You can set your RPC in the utils/providers.ts
file inside the transport in the Rainbowkit getDefaultConfig
object. You might want to consider adding the API key to your .env
file.
Architecture
/app/components/examples includes the example components used in the template
/app/components/ includes other components like header, footer and customButton
/app/wallet is an example wallet page
/app/cartesi includes Cartesi specific contract interaction code that you can easily call/import from anywhere in your component. These functions are specially arranged in Portals.ts file
/app includes other components, utils and helper functions
/public includes static files
Learn More
To learn more about Next.js, take a look at the following resources:
Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
Last updated