Mega Prompt: HTML to Next.js Conversion for SEO
🤖 Mega Prompt: HTML to Next.js Conversion for SEO
Objective
Migrate a pure HTML website to a Next.js 14 application with the pages router. The primary goal is to achieve superior technical SEO by implementing SSG/SSR and modern performance optimizations, while maintaining the original design and functionality.
Target Audience
Developers and digital marketers aiming to modernize a legacy website to gain a competitive edge in SEO and site performance.
SEO Keywords
HTML to Next.js migration, legacy website modernization, technical SEO, Next.js for SEO, static site generation, server-side rendering, web performance optimization, Netlify deployment.
Instructions
Project Bootstrap
- Create a new Next.js 14 project with the pages router and TypeScript.
- Set up Tailwind CSS and a global stylesheet for consistent styling.
Routing & Assets
- Map each legacy HTML file to a corresponding file under the /pages directory, preserving the URL structure.
- Move all static assets (images, fonts, CSS) to the /public directory and update all references.
Server Rendering Policy
- Every indexable page must use getStaticProps or getServerSideProps to ensure all content is pre-rendered on the server.
- Do not rely on useEffect or client-side data fetching for primary content.
- Implement getStaticPaths for multi-page sections like blogs or documentation.
Layouts & Components
- Create a shared layout for consistent headers, navigation, and footers.
- Convert repeated HTML sections into reusable React components.
Technical SEO Implementation
- Develop a centralized SEO component or utility to manage metadata.
- Apply per-page metadata including <title>, meta description, canonical URLs, and Open Graph tags.
- Ensure pages have exactly one <h1> tag, semantic landmarks, and descriptive link text.
Performance Optimization
- Replace legacy <img> tags with the optimized Next.js <Image> component.
- Preload critical fonts and lazy-load non-essential assets.
Deployment
- Provide a netlify.toml file to configure the build and publishing settings for Netlify.
- Ensure the netlify.toml enables the official Next.js runtime for proper SSR support.
- Document the one-click deployment process, including syncing with a GitHub repository.
Output & Verification
- Deliver a complete, deployable Next.js project.
- Confirm that the "View Source" and curl command outputs show full, server-rendered HTML.
- Check that Lighthouse scores for SEO and performance meet expectations.
Important Note
This mega prompt is highly effective, but it's not foolproof. It works correctly about 99% of the time, but there can be exceptions based on your project's specific configuration.
Always back up your code! Before running a large-scale migration like this, make sure you have a complete backup of your project or know how to revert the changes using version control like Git (e.g., `git reset --hard` or `git checkout .`).
How to Use This Mega Prompt
This prompt is designed to be used with a variety of AI-powered coding assistants and tools. The goal is to provide the AI with a comprehensive set of instructions to perform the migration accurately.
Supported Tools
You can use this prompt with a wide range of AI coding assistants, including:
- Google's AI tools like Jules
- OpenAI's Codex and its integrations
- Modern IDEs with AI capabilities like Visual Studio, Cursor, Trae, etc.
Usage Steps
- Copy the Prompt: Click the copy button on the prompt box above to copy the entire text to your clipboard.
- Open Your AI Tool: Go to your preferred AI coding assistant or IDE.
- Paste and Run: Paste the complete prompt into the chat or command input field of the AI tool. The AI should then begin the process of analyzing your code and suggesting the necessary changes for the migration.
- Review and Apply: Carefully review the changes suggested by the AI. Apply them incrementally and test your application at each step to ensure everything is working correctly.
Why Migrate from Pure HTML to Next.js?
While a pure HTML website is as "crawlable" as it gets, it lacks the modern tools and optimizations that are essential for competing in today's digital landscape. Migrating to Next.js provides a significant boost in both development efficiency and SEO performance.
Automated SEO & Performance
A pure HTML site requires manual effort for every SEO detail. Next.js automates this process by providing features like automatic code splitting, optimized image loading with <Image>, and easy metadata management with the <Head> component. These built-in tools help you achieve better Core Web Vitals scores and reduce manual labor.
Centralized & Reusable Components
A pure HTML site is often a collection of repeated code snippets. Next.js allows you to break your site into reusable components (e.g., a header, a footer, a navigation bar). This not only makes your codebase cleaner and easier to maintain but also ensures consistency across your site.
Dynamic Content Management
Pure HTML is great for static content but becomes a nightmare to manage when content needs to be updated or personalized. Next.js, with its ability to fetch data on the server with getStaticProps or getServerSideProps, allows you to connect to a headless CMS or API to manage your content dynamically, without sacrificing SEO.
Modern Development Workflow
Next.js provides a superior developer experience with features like file-based routing and live reloading, which drastically speed up the development and iteration process. You can build and deploy a site in a fraction of the time it would take with a traditional HTML workflow.
A Deeper Dive into the Migration Process
The "Why" Behind the Change 🤔
A pure HTML site is like a collection of static files. Every time you want to make a small change, you have to find and manually edit every file where that element appears. Next.js, with its component-based architecture, changes this. You can create a reusable Header component and use it on every page. Any future change to the header only needs to be made in one place. This significantly improves the developer experience (DX) and makes your project far more scalable and maintainable.
Technical Deep Dive 💻
To start, think of your HTML site in terms of components. Take your header.html and turn it into a Header.tsx component. Then, create a Layout.tsx component that wraps your header, footer, and a main content area using props.children. Your individual pages can then simply import and use this shared layout.
For technical SEO, Next.js gives you a massive advantage. You can create a centralized SEO component that automatically generates metadata for each page. This ensures every page has a unique title, meta description, and canonical URL. You can also implement JSON-LD for rich snippets, which helps Google understand your site's content better. Next.js handles this seamlessly, allowing you to focus on your content instead of manual SEO tags.
The Deployment Process 🌐
The deployment of a Next.js app is a far cry from simply uploading a folder of HTML files via FTP. Platforms like Vercel and Netlify have made this process incredibly efficient. They are built to work with Next.js and automate key steps like server-side rendering and static asset caching.
For a Netlify deployment, you simply add a netlify.toml file to your project. This file specifies your build command and the output directory. Most importantly, it enables the Next.js runtime, which is what allows Netlify to handle your server-rendered pages correctly. A simple push to GitHub, and your site is live, optimized, and ready for crawlers.