How to Create a Landing Page in Next.js Quickly

To create a landing page in Next.js, create a functional component inside the app/page.js file using React syntax. This component will automatically serve as the homepage, where you can add your landing page content using JSX.

Syntax

In Next.js, a landing page is a React functional component exported from the app/page.js file. This file represents the root route (/) of your site.

• export default function Page(): Defines the landing page component.
• return ( ... ): Returns JSX that renders the page content.
• Use semantic HTML tags like <main>, <header>, and <section> for structure and accessibility.

javascript

export default function Page() {
  return (
    <main>
      <h1>Welcome to My Landing Page</h1>
      <p>This is a simple landing page built with Next.js.</p>
    </main>
  )
}

Output

A webpage showing a heading 'Welcome to My Landing Page' and a paragraph below it.

Example

This example shows a complete landing page with a header, main content, and a call-to-action button. It uses semantic HTML and simple styling for clarity.

javascript

export default function Page() {
  return (
    <main style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      height: '100vh',
      fontFamily: 'Arial, sans-serif',
      padding: '2rem'
    }}>
      <header>
        <h1>Welcome to Next.js Landing Page</h1>
      </header>
      <section style={{ maxWidth: '600px', textAlign: 'center' }}>
        <p>Build fast and scalable landing pages easily with Next.js.</p>
        <button style={{
          marginTop: '1rem',
          padding: '0.75rem 1.5rem',
          fontSize: '1rem',
          cursor: 'pointer',
          borderRadius: '5px',
          border: 'none',
          backgroundColor: '#0070f3',
          color: 'white'
        }}>
          Get Started
        </button>
      </section>
    </main>
  )
}

Output

A full-page landing page with a centered heading, descriptive text, and a blue 'Get Started' button.

Common Pitfalls

Some common mistakes when creating a landing page in Next.js include:

• Placing the landing page component in the wrong folder (it must be app/page.js for the root route).
• Using class components instead of functional components (Next.js favors functional components with hooks).
• Not using semantic HTML tags, which hurts accessibility and SEO.
• Forgetting to export the component as default, which prevents Next.js from recognizing the page.

javascript

/* Wrong: Placing landing page in a wrong file */
// File: app/home.js (won't serve as root page)
export default function Home() {
  return <h1>Wrong file for landing page</h1>
}

/* Right: Correct file and export */
// File: app/page.js
export default function Page() {
  return <h1>Correct landing page</h1>
}

Output

Only the component in app/page.js will render at the root URL; others won't.

Quick Reference

Tips for creating landing pages in Next.js:

• Use app/page.js for the homepage component.
• Write functional components with export default function Page().
• Use semantic HTML for better SEO and accessibility.
• Style with CSS modules, inline styles, or Tailwind CSS for responsive design.
• Test your page in the browser and use DevTools to inspect layout and accessibility.

Key Takeaways

Create your landing page component in the app/page.js file to serve it at the root URL.

Use React functional components with semantic HTML for structure and accessibility.

Export the component as default so Next.js can recognize and render it.

Style your landing page for responsiveness and good user experience.

Avoid placing the landing page in incorrect files or using class components.