Skip to main content

Deploy Your NextJS App

Hint

We recommend connecting your GitHub repo to Vercel (through the Vercel UI) so it gets automatically deployed when pushing to main.

If you want to deploy directly from the CLI, run this and follow the steps to deploy to Vercel:

yarn vercel

Once you log in (email, GitHub, etc.), the default options should work. It'll give you a public URL.

If you want to redeploy to the same production URL you can run:

yarn vercel --prod

If you omit the --prod flag it will deploy it to a preview/test URL.

Make sure to check the values of your Scaffold Configuration before deploying your NextJS App.

Scaffold App Configuration​

You can configure different settings for your dapp at packages/nextjs/scaffold.config.ts.

export type ScaffoldConfig = {
  targetNetworks: Chain[];
  pollingInterval: number;
  alchemyApiKey: string;
  walletConnectProjectId: string;
  onlyLocalBurnerWallet: boolean;
  walletAutoConnect: boolean;
  // your dapp custom config, eg:
  // tokenIcon : string;
};

The configuration parameters are described below. Make sure to update the values according to your needs:

- targetNetworks​

Array of blockchain networks where your dapp is deployed. Use values that are present on chains object from viem/chains eg: targetNetworks: [chains.optimism]

To add a custom chain that's not in viem/chains, see the recipe, Add a custom chain.

- pollingInterval​

The interval in milliseconds at which your front-end application polls the RPC servers for fresh data. Note that this setting does not affect the local network.

- alchemyApiKey​

Default Alchemy API key from Scaffold-ETH 2 for local testing purposes. It's recommended to obtain your own API key from the Alchemy Dashboard and store it in this environment variable: NEXT_PUBLIC_ALCHEMY_API_KEY in the \packages\nextjs\.env.local file.

- walletConnectProjectId​

WalletConnect's default project ID from Scaffold-ETH 2 for local testing purposes. It's recommended to obtain your own project ID from the WalletConnect website and store it in this environment variable: NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID in the \packages\nextjs\.env.local file.

- onlyLocalBurnerWallet​

Controls the networks where the Burner Wallet feature is available. This feature provides a lightweight wallet for users.

  • true => Use Burner Wallet only on Hardhat network.
  • false => Use Burner Wallet on all networks.

- walletAutoConnect​

Set it to true to activate automatic wallet connection behavior:

  • If the user was connected into a wallet before, on page reload it reconnects automatically.
  • If the user is not connected to any wallet, on reload, it connects to the burner wallet if it is enabled for the current network. See onlyLocalBurnerWallet

You can extend this configuration file, adding new parameters that you need to use across your dapp (make sure you update the above type ScaffoldConfig):

  tokenIcon: "💎",

To use the values from the ScaffoldConfig in any other file of your application, you first need to import it in those files:

import scaffoldConfig from "~~/scaffold.config";