Create Nextjs Dapp

Table of Contents

• Introduction
• Quick start
• Technologies
• Templates

Introduction

This is a starter for building Dapps with Nextjs, React and ethers.
By running npx create-nextjs-dapp you will be able to choose a project name and the template you want to use directly from your terminal.

Here is the list of the available templates:

• Base (No UI kit)
• MUI
• Styled Components

Quick start

You can quickly start a new project with this starter by using the following command:

npx create-nextjs-dapp

Technologies

The project has been built using the following technologies:

Working configuration:

• node 16.16.0
• npm 8.11.0

Templates

• base
• MUI
• Styled Components

Base

The base template has no UI framework configured. The default style is based on .scss with examples of how to use it.

MUI

The MUI template is based on the MUI framework. It is configured with the MUI System and the MUI Base.

All is configured to work with the Material UI. You can run the following command to install it:

npm install @mui/material

Styled Components

Styled components is a popular CSS-in-JS library developed for React. It is configured with the Styled Components library.

There are already base functions to add responsive padding, margin and frames to your components.

See IPadding, IMargin and IFrames available at ./interfaces/layout.ts

---

Contributing

Creating a new template

1. Create a new folder in ./packages with the name of your template.
2. Create the following files, inspired by other templates (see ./packages/base for an example):
   • ./packages/[template-name]/package.json
   • ./packages/[template-name]/pages/index.tsx
   • ./packages/[template-name]/tsconfig.json
   • ./packages/[template-name]/next.config.js
   • ./packages/[template-name]/next-env.d.ts
3. Open ./scripts/build.js and add your template to the templates array (the name has to be the same as the template directory name in ./packages).
   • const templates = ['base', 'mui', 'styled-components', 'new-template-name'];
4. Go to the project root directory ./ and run npm run build to copy the template common files to the new template.
5. Go to your template (cd ./packages/[template-name]) and start development with npm run dev.