How to Build Production-Ready Landing Pages with Next.js

Landing page structure that converts

A production landing page has a clear hierarchy: hero section with value proposition and CTA, social proof, features/benefits, how it works, testimonials, FAQ, and a final CTA. Every section drives toward one action — sign up, connect wallet, or book a call.

Hero section

The hero must communicate what you do, who it is for, and what action to take — within 5 seconds.

// components/landing/Hero.tsx
export function Hero() {
  return (
    <section className="mx-auto max-w-4xl px-6 py-24 text-center">
      <p className="text-sm font-semibold uppercase tracking-widest text-indigo-400">
        DeFi Portfolio Tracker
      </p>
      <h1 className="mt-4 text-4xl font-bold tracking-tight text-white md:text-6xl">
        Track Every Position Across Every Chain
      </h1>
      <p className="mx-auto mt-6 max-w-2xl text-lg text-gray-400">
        Connect your wallet and see balances, APY, and rewards across Ethereum, Base, and Arbitrum in one dashboard.
      </p>
      <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
        <button className="rounded-full bg-indigo-600 px-8 py-3.5 text-base font-semibold text-white">
          Launch Dashboard
        </button>
        <a href="#features" className="text-gray-400 hover:text-white">
          See how it works →
        </a>
      </div>
    </section>
  );
}

Features, testimonials, and FAQ

Keep features benefit-focused, not feature-focused. "See all your DeFi positions in one view" beats "Multi-protocol aggregation engine."

// components/landing/FAQ.tsx
const faqs = [
  { q: 'Which wallets are supported?', a: 'MetaMask, Coinbase Wallet, Rainbow, and WalletConnect.' },
  { q: 'Which chains do you support?', a: 'Ethereum, Base, Arbitrum, and Polygon.' },
  { q: 'Is my data safe?', a: 'We never store private keys. All data is read from public blockchain state.' },
];

export function FAQ() {
  return (
    <section className="mx-auto max-w-2xl px-6 py-16">
      <h2 className="text-3xl font-bold text-white">FAQ</h2>
      <div className="mt-8 space-y-4">
        {faqs.map((faq) => (
          <details key={faq.q} className="rounded-xl border border-white/10 p-4">
            <summary className="cursor-pointer font-medium text-white">{faq.q}</summary>
            <p className="mt-3 text-gray-400">{faq.a}</p>
          </details>
        ))}
      </div>
    </section>
  );
}

SEO setup

// app/page.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'DeFi Portfolio Tracker — Multi-Chain Dashboard',
  description: 'Track your DeFi positions across Ethereum, Base, and Arbitrum. Balances, APY, rewards, and transaction history in one dashboard.',
  openGraph: {
    title: 'DeFi Portfolio Tracker',
    description: 'Multi-chain DeFi dashboard',
    images: [{ url: '/og-image.png', width: 1200, height: 630 }],
  },
};

Performance optimization

Use Server Components for static sections. Lazy-load below-the-fold content. Optimize images with next/image. Self-host fonts with next/font. Target Lighthouse score above 90.

import dynamic from 'next/dynamic';

const Testimonials = dynamic(() => import('@/components/landing/Testimonials'));
const PricingSection = dynamic(() => import('@/components/landing/Pricing'));

Accessibility

Semantic HTML (main, section, nav, h1-h3). Sufficient color contrast. Keyboard-navigable interactive elements. Alt text on images. aria-labels on icon buttons. Skip-to-content link.

Deployment on Vercel

Connect your GitHub repo to Vercel. Every push to main deploys to production. Every PR gets a preview URL. Set environment variables in the Vercel dashboard. Add a custom domain with DNS configuration.

Common mistakes

Too many CTAs competing for attention. Vague hero copy ("The future of finance"). No social proof. Missing mobile layout. Slow load from unoptimized images. No FAQ section. Client-side only rendering (bad for SEO). No Open Graph image for social sharing.

FAQ

**How long should a landing page be?** Long enough to answer objections. Typically 5–8 sections. Use scroll depth analytics to see where users drop off.

**Should I use a landing page template?** Templates accelerate development but customize heavily. Generic templates signal low effort to potential clients.

**One page or multiple?** One page for product launches. Separate pages for features, pricing, and docs as the product grows.

**How do I A/B test?** Vercel supports edge-based A/B testing. For simpler setups, test one change at a time and compare analytics over 2 weeks.