Creating a Static Page with Next.js
I'll create a clean, responsive static page that can be exported as a static site. This implementation uses Next.js with the App Router and is optimized for static site generation.
How to Use This Static Page
This is a fully static page built with Next.js that can be exported as static HTML, CSS, and JavaScript files. The page includes:
- A responsive header with navigation
- A hero section with a call-to-action
- A features section highlighting key benefits
- A testimonials section with customer quotes
- A pricing section with different plan options
- A contact section with call-to-action buttons
- A footer with links and copyright information
Static Export Configuration
I've configured the project for static export by setting output: 'export' in the Next.js configuration. This tells Next.js to generate static HTML files during the build process 1. When you run next build, it will create an out directory containing all the static assets needed for your site.
Deployment
You can deploy this static site to any static hosting service like:
- Vercel
- Netlify
- GitHub Pages
- Amazon S3
- Any traditional web hosting
Since all the content is pre-rendered at build time, the site will load extremely fast and be highly SEO-friendly 2.
Deploying Your Static Site
Great! Since you have the complete code, here's how to deploy your static site:
Option 1: Deploy to Vercel (Recommended)
- Push your code to a Git repository (GitHub, GitLab, or Bitbucket)
Connect to Vercel:
- Go to vercel.com and sign in
- Click "Add New..." → "Project"
- Select your repository
- Vercel will automatically detect it's a Next.js project
Configure the build settings:
- Vercel will automatically detect the correct settings
- The
output: 'export'in yournext.config.mjswill tell Vercel to create a static build
- Click "Deploy"
Vercel will build and deploy your static site, providing you with a URL to access it.
Option 2: Manual Deployment
If you prefer to deploy manually:
Build your project:
npm run buildThis will create an
outdirectory with all your static files.Deploy the
outdirectory to any static hosting service:- Netlify (drag and drop the
outfolder) - GitHub Pages (push the
outfolder to a gh-pages branch) - Amazon S3
- Any traditional web hosting
- Netlify (drag and drop the
Option 3: Deploy from v0
Since you're using v0, you can deploy directly from here:
- Click the "..." menu at the top right of the code block
- Select "Deploy to Vercel"
- Follow the prompts to complete the deployment
That's it! Your static site will be live and accessible to everyone.