https://github.com/muttoni/fcl-nextjs-quickstart

A basic React/NextJS project showing how to use the Flow Client Library (FCL)
https://github.com/muttoni/fcl-nextjs-quickstart

cadence flow nextjs react starter template

Last synced: 8 days ago
JSON representation

A basic React/NextJS project showing how to use the Flow Client Library (FCL)

• Host: GitHub
• URL: https://github.com/muttoni/fcl-nextjs-quickstart
• Owner: muttoni
• Created: 2021-12-17T15:18:04.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-04-17T21:07:43.000Z (over 1 year ago)
• Last Synced: 2024-08-01T18:25:24.405Z (3 months ago)
• Topics: cadence, flow, nextjs, react, starter, template
• Language: JavaScript
• Homepage: https://fcl-nextjs-quickstart.vercel.app
• Size: 137 KB
• Stars: 28
• Watchers: 2
• Forks: 11
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# How to use the Flow Client Library (FCL) with Next.js

Everything you need to build a Next.js project with the Flow Client Library (FCL).

For a SvelteKit example, see my other repo: https://github.com/muttoni/fcl-sveltekit

## [Live demo](https://fcl-nextjs-quickstart.vercel.app/)

[![image](https://user-images.githubusercontent.com/27052451/146340356-e34f3c47-43bc-4c11-926b-b82b99d561c6.png)](https://fcl-sveltekit.vercel.app/)

## Running on Flow Testnet

This project will run on the Flow testnet simply as:

```bash

npm run build

npm run start

```

## Developing with Flow emulator

**Pre-Requisite**: To develop locally, make sure you have the Flow CLI installed: https://docs.onflow.org/flow-cli/install/

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start the emulator, deploy the contracts, followed by the development server:

```bash

flow emulator start --dev-wallet

flow project deploy --network emulator

npm run dev

# or start the server and open the app in a new browser tab

npm run dev -- --open

```

> NOTE: If you are switching between testnet and the emulator without changing tabs, FCL will keep you logged in with your testnet address (or vice-versa). Remember to logout inbetween environments to avoid runtime errors!

## Building

Before creating a production version of your app, build it!

```bash

npm run build

```

## Testimonials