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

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

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

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

Hint

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

Practice

1. What does the next export command do in a Next.js project?

easy

A. Runs server-side rendering on every request

B. Starts the development server with hot reloading

C. Builds the app for production without exporting

D. Generates static HTML files for the entire site

Solution

1. Step 1: Understand the purpose of next export

   The next export command creates static HTML files from your Next.js app, making it server-free.

2. Step 2: Compare with other commands

   Unlike next dev or next build, next export does not start a server or do server-side rendering on request.

3. Final Answer:

   Generates static HTML files for the entire site -> Option D

4. Quick Check:

   Static export = static HTML files [OK]

Hint: Remember: export means create static files [OK]

Common Mistakes:

• Confusing export with development server
• Thinking export runs server-side code
• Assuming export builds but doesn't generate static files

2. Which of the following is the correct way to configure Next.js for static export in next.config.js?

easy

A. module.exports = { output: 'export' }

B. module.exports = { export: true }

C. module.exports = { staticExport: true }

D. module.exports = { exportStatic: true }

Solution

1. Step 1: Recall Next.js static export config

   Next.js uses output: 'export' in next.config.js to enable static export mode.

2. Step 2: Check other options for correctness

   Options like exportStatic or staticExport are not valid Next.js config keys.

3. Final Answer:

   module.exports = { output: 'export' } -> Option A

4. Quick Check:

   Config key is output = 'export' [OK]

Hint: Look for exact config key 'output' with value 'export' [OK]

Common Mistakes:

• Using incorrect config keys like exportStatic
• Missing quotes around 'export'
• Confusing config with build scripts

3. Given this Next.js page component, what will be the output after running next export?

export default function Home() {
  return <h1>Welcome to Static Export</h1>;
}

medium

A. A server-rendered page that updates on each request

B. An error because next export cannot export pages without getStaticProps

C. A static HTML file with <h1>Welcome to Static Export</h1>

D. A blank page because static export disables rendering

Solution

1. Step 1: Understand static export behavior for simple components

   Static export generates HTML files for pages without needing data fetching methods like getStaticProps.

2. Step 2: Check the component output

   The component returns a simple <h1> element, so the exported HTML will contain that heading.

3. Final Answer:

   A static HTML file with <h1>Welcome to Static Export</h1> -> Option C

4. Quick Check:

   Static export outputs static HTML matching component JSX [OK]

Hint: Static export works with simple components without data fetching [OK]

Common Mistakes:

• Thinking getStaticProps is always required
• Assuming server rendering happens after export
• Believing static export disables rendering

4. You run next export but get an error: "Pages with getServerSideProps can not be exported." How do you fix this?

medium

A. Add output: 'export' to next.config.js

B. Remove or replace getServerSideProps with getStaticProps

C. Run next build before next export

D. Use next dev instead of next export

Solution

1. Step 1: Understand the error cause

   Static export cannot handle pages using getServerSideProps because it requires server-side rendering on each request.

2. Step 2: Fix by changing data fetching method

   Replace getServerSideProps with getStaticProps or remove it to allow static export.

3. Final Answer:

   Remove or replace getServerSideProps with getStaticProps -> Option B

4. Quick Check:

   Static export disallows getServerSideProps [OK]

Hint: Static export disallows server-side props; use static props [OK]

Common Mistakes:

• Trying to export pages with getServerSideProps
• Forgetting to build before export
• Confusing next dev with export

5. You want to export a blog site with dynamic routes like /posts/[id]. Which approach works best with static export?

hard

A. Use getStaticPaths and getStaticProps to pre-generate pages

B. Use getServerSideProps to fetch data on each request

C. Use client-side fetching only and export empty pages

D. Disable static export and use server rendering

Solution

1. Step 1: Understand dynamic routes with static export

   Static export requires knowing all dynamic paths ahead of time using getStaticPaths.

2. Step 2: Use getStaticProps to fetch data at build time

   Combining getStaticPaths and getStaticProps pre-generates all pages for export.

3. Final Answer:

   Use getStaticPaths and getStaticProps to pre-generate pages -> Option A

4. Quick Check:

   Dynamic static export needs getStaticPaths + getStaticProps [OK]

Hint: Pre-generate dynamic pages with getStaticPaths + getStaticProps [OK]

Common Mistakes:

• Using getServerSideProps with static export
• Relying only on client-side fetching for dynamic pages
• Not providing paths for dynamic routes