Starter KitNext.js + Tailwind

Next.js Demo Repository

Quickly clone and run the official Next.js example repository to explore working QR code generation and payment flows in a complete project environment.

View on GitHub (nextjs-qrcode-example)

Setup Instructions

Clone and Install Dependencies

Clone the repository and install all required packages using npm:

bash
git clone https://github.com/omkarbhosale-dev/nextjs-qrcode-example.git
cd nextjs-qrcode-example
npm install

Configure Environment Variables

Create a .env.local file in the root directory and add your UPI ID:

.env.local
# Create .env.local in root directory
NEXT_PUBLIC_UPI_ID=yourname@okhdfcbank
NEXT_PUBLIC_PAYEE_NAME="My Store"

Start the Development Server

Run the development server and open http://localhost:3000 in your browser:

bash

npm run dev

Key Files to Inspect

src/app/page.tsx

Main landing page containing user amount input and state.

src/app/components/QRCode.tsx

Core client component generating and displaying the dynamic UPI QR code.

Previous PagePython (PyPI)Next Page Live QR Studio