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
• Stylex
• Tailwind

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
• Stylex
• Tailwind

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

---

Stylex

The Stylex template leverages Stylex for styling, blending the benefits of inline styles and CSS without their limitations. It provides a simple JavaScript syntax and compiler for defining component-scoped styles, avoiding specificity issues while supporting media queries. Stylex utilizes atomic CSS to minimize output size, ensuring scalability and maintainability of styles in large projects. Please refer to the Stylex documentation for more information on how to use the library.

Tailwind

The Tailwind template is based on the Tailwind CSS framework. It is configured with the Tailwind CSS library. This template utilizes the utility-first approach to styling, providing a highly customizable and efficient way to build your Dapp.

This template includes a base configuration file (tailwind.config.js) to get you started with customizing your styles. You can refer to the Tailwind CSS documentation for more information on how to extend and modify the default configuration.