Overview

The Next.js Internet Computer Starter Template is a project that offers a simple starter template for Dfinity Internet Computer using the Next.js framework as the frontend. It includes a backend greeting “hello world” canister written in Motoko and an ImageBucket canister that allows users to create, delete, and retrieve images. The frontend features a React HTML form for greeting messages and an image upload form with the ability to pick and display images.

Features

• Backend: Includes a greeting “hello world” canister written in Motoko and an ImageBucket canister for image management.
• Frontend: Provides a simple React HTML form for greeting messages and an image upload form with image display functionality.
• Live Demo in IC Mainnet: Allows users to experience the demo app in the IC Mainnet.

Installation

To run the Next.js Internet Computer Starter Template locally, follow these steps:

1. Install NodeJS 16.* or higher from https://nodejs.org/en/download/.
2. Install the Internet Computer dfx CLI from https://smartcontracts.org/docs/current/developer-docs/quickstart/local-quickstart/.
3. Download and install Visual Studio Code from https://code.visualstudio.com/ (recommended code editor).
4. Install the Motoko extension for Visual Studio Code from https://marketplace.visualstudio.com/items?itemName=dfinity-foundation.vscode-motoko (recommended).
5. Clone the Git repository of the project.
6. Open the command terminal and start the dfx local server in the background with the following commands:

# Start dfx local server
dfx start --background

Note: On MacOS, you may be asked to allow connections from dfx local server. 7. Install dependencies, deploy canisters, and run the Next.js dev server:

# Install dependencies
npm install

# Deploy canister
dfx deploy

# Run Next.js dev server
npm run dev

8. Open the demo app in Chrome with the following URL: http://localhost:3000/.
9. To stop the dfx server running in the background, run the following command:

# Stop dfx server
dfx stop

Summary

The Next.js Internet Computer Starter Template is a comprehensive project that provides a simple starter template for Dfinity Internet Computer. It offers both backend and frontend functionality, including a greeting “hello world” canister and an ImageBucket canister for image management. The frontend features React HTML forms for greeting messages and image uploads, with the ability to display the uploaded images. With its easy installation process and live demo in the IC Mainnet, this template serves as a valuable starting point for developers looking to build applications on the Internet Computer platform.