> ## Documentation Index
> Fetch the complete documentation index at: https://docs.polygon.technology/llms.txt
> Use this file to discover all available pages before exploring further.

# Frontend

> How to work with the Next.js frontend in a dApp Launchpad project, including wallet connections, contract interactions, and deployment.

## Prerequisites

Complete the [environment variable setup in the quickstart](/tools/dApp-development/launchpad/quickstart/#step-3-set-up-environment-variables) before following the steps below.

## Framework

The frontend runs on Next.js. To start customizing it, edit the component at `./frontend/src/pages/index`.

<Note>
  If you know React.js but are new to Next.js, the transition is straightforward. See the [Next.js docs](https://nextjs.org/docs) for details.
</Note>

## Environment variables

All environment variable names exposed to the browser must be prefixed with `NEXT_PUBLIC_`.

## Connect wallets

[Web3Modal v3](https://web3modal.com/) is integrated and pre-configured. Use the provided [`useWallet`](https://github.com/0xPolygon/dapp-launchpad/blob/scaffold-template/javascript/frontend/src/hooks/useWallet.js) hook to interact with Web3Modal and wallets. This hook contains utilities for all common wallet operations.

## Send transactions to smart contracts

To send transactions to a locally deployed contract or a contract on a production chain, use the [`useSmartContract`](https://github.com/0xPolygon/dapp-launchpad/blob/scaffold-template/javascript/frontend/src/hooks/useSmartContract.js) hook. It provides utilities for getting and interacting with an Ethers.js contract instance, and automatically points to the correct chain and contracts when you run or deploy the app.

## Run the local frontend server

The [`dev`](/tools/dApp-development/launchpad/commands/#dev) command starts the local Next.js dev server along with the local blockchain. See the [start developing instructions](/tools/dApp-development/launchpad/quickstart/#step-4-start-the-development-environment) for usage.

## Deploy to Vercel

The [`deploy`](/tools/dApp-development/launchpad/commands/#deploy) command handles frontend deployment to Vercel automatically. Vercel offers a free tier for developers.

To deploy:

```bash theme={null}
dapp-launchpad deploy -n <CHAIN-NAME>
```

No pre-configuration is required. The command walks you through all relevant steps when you run it.

See the [deploy section of the quickstart](/tools/dApp-development/launchpad/quickstart/#deploy-to-production) for the full deployment workflow.