Mesh

One of the most easy Smart Contract Languages for React and Nextjs or typescript users is Mesh.

The setup for development environment is from Mesh website. Click the source link below.

Source: https://meshjs.dev/guides/nextjs

# System Setup

## 1. Visual Studio Code

Visual Studio Code is a code editor made by Microsoft. Download and install Visual Studio Code for code editing.

## 2. Node.js

Node.js is a cross-platform JavaScript runtime environment that runs on the V8 engine and executes JavaScript code. Install the Long-Term Support (LTS) version of Node.js (as of writing v16.16.0).

## Setup Next.js

### 1. Create Project Folder and Open Visual Studio Code

Create a new folder for your project, and give the folder a meaningful name. Open the Visual Studio Code application and drag your project folder into Visual Studio Code.

### 2. Create Next.js App

From the menu options in Visual Studio Code, open the Terminal and execute this command to create a new Next.js application:

```bash
npx create-next-app@latest --typescript .

3. Start Development Server

After the installation is complete, start the development server with:

npm run dev

Visit http://localhost:3000 to view your application. Press CTRL+C to stop the application.

Setup Mesh

1. Install MeshJS Package

Install the latest version of Mesh with npm:

npm install @meshsdk/core @meshsdk/react

2. Add Webpack in next.config.js

Open next.config.js and append webpack configurations. Your next.config.js should look like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: function (config, options) {
    config.experiments = {
      asyncWebAssembly: true,
      layers: true,
    };
    return config;
  },
};
module.exports = nextConfig;

In the more recent Next version, configuration for next.config.mjs:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: function (config, options) {
    config.experiments = {
      asyncWebAssembly: true,
      layers: true,
    };
    return config;
  },
};

export default nextConfig;

3. Congratulations

You just saved a few weeks of learning and a number of days trying to get started. Your Next.js application is ready to connect wallet, browse assets, and make some transactions.