Static export option in NextJS - Mini Project: Build & Apply

Static Export with Next.js

📖 Scenario: You are building a simple blog homepage using Next.js. You want to create a static export of your site so it can be hosted on any static server without needing a Node.js backend.

🎯 Goal: Build a Next.js page that fetches static data at build time and configure the project for static export.

📋 What You'll Learn

Create a Next.js page component that displays a list of blog post titles.

Use getStaticProps to fetch the blog posts data at build time.

Add a configuration to enable static export of the Next.js app.

Ensure the exported site can be served as static HTML files.

💡 Why This Matters

🌍 Real World

Static export is useful for blogs, documentation sites, and marketing pages that do not require server-side rendering or dynamic content on every request.

💼 Career

Understanding static export in Next.js is important for frontend developers working on fast, scalable websites that can be hosted cheaply and easily.

1

Create blog posts data

Create a constant called posts that is an array of objects. Each object should have id and title properties with these exact values: { id: '1', title: 'Hello Next.js' } and { id: '2', title: 'Learn Static Export' }.

NextJS

# Your code here

Need a hint?

Use const posts = [ ... ] with two objects inside the array.

2

Add getStaticProps function

Add an exported async function called getStaticProps that returns an object with a props key containing the posts array.

NextJS

const posts = [
  { id: '1', title: 'Hello Next.js' },
  { id: '2', title: 'Learn Static Export' }
];

// Your code here

Need a hint?

Define export async function getStaticProps() { return { props: { posts } } }.

3

Create the page component

Create a default exported React functional component called HomePage that accepts posts as a prop and renders an unordered list (<ul>) of post titles inside list items (<li>). Use posts.map(post => ...) with post.id as the key.

NextJS

const posts = [
  { id: '1', title: 'Hello Next.js' },
  { id: '2', title: 'Learn Static Export' }
];

export async function getStaticProps() {
  return {
    props: {
      posts
    }
  };
}

// Your code here

Need a hint?

Write export default function HomePage({ posts }) { return ( ... ) } with a list of titles.

4

Configure static export

Create a file called next.config.js in the project root with a default export object that has output: 'export' to enable static export.

NextJS

const posts = [
  { id: '1', title: 'Hello Next.js' },
  { id: '2', title: 'Learn Static Export' }
];

export async function getStaticProps() {
  return {
    props: {
      posts
    }
  };
}

export default function HomePage({ posts }) {
  return (
    
      Blog Posts
      
        {posts.map(post => (
          {post.title}
        ))}
      
    
  );
}

// Your code here

Need a hint?

Create next.config.js with export default { output: 'export' }.