Static export option in NextJS - Step-by-Step Execution

Concept Flow - Static export option

Write React Components

↓

Use getStaticProps or getStaticPaths

↓

Run next export command

↓

Next.js generates static HTML files

↓

Static files served by any web server

↓

User visits page -> HTML loads instantly

This flow shows how Next.js takes React components with static data fetching methods and generates static HTML files for fast loading.

Execution Sample

NextJS

export async function getStaticProps() {
  return { props: { message: 'Hello from static export!' } };
}

export default function Home({ message }) {
  return <h1>{message}</h1>;
}

This code fetches static props at build time and renders a page with a static message.

Execution Table

Step	Action	Evaluation	Result
1	Call getStaticProps during build	Runs async function	Returns props: { message: 'Hello from static export!' }
2	Render Home component with props	Home({ message })	Renders <h1>Hello from static export!</h1>
3	next export generates HTML file	Static HTML created	Page ready to serve as static file
4	User visits page	Browser requests HTML	Instant page load with static content

💡 Static export completes after generating all HTML files for pages with getStaticProps.

Variable Tracker

Variable	Start	After getStaticProps	After Render	Final
message	undefined	'Hello from static export!'	'Hello from static export!'	'Hello from static export!'

Key Moments - 2 Insights

Why does getStaticProps run only once during build and not on every page visit?

Because getStaticProps runs at build time to generate static HTML, as shown in execution_table step 1, so the page loads instantly without running code on each visit.

What happens if you try to fetch dynamic data inside getStaticProps?

The data is fetched once at build time and stays the same for all users until you rebuild, as shown in variable_tracker where 'message' is fixed after build.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'message' after getStaticProps runs?

A null

B 'Hello from static export!'

C undefined

D An error

💡 Hint

Check execution_table row 1 and variable_tracker after getStaticProps

At which step does Next.js generate the static HTML file?

A Step 4

B Step 2

C Step 3

D Step 1

💡 Hint

Look at execution_table step descriptions

If you remove getStaticProps, what changes in the static export process?

A Page exports as static but without props

B No static HTML is generated

C Page becomes server-side rendered

D Build fails

💡 Hint

Think about how props are passed in execution_table and variable_tracker

Concept Snapshot

Static export in Next.js:
- Use getStaticProps to fetch data at build time
- Run 'next export' to generate static HTML files
- Pages load instantly with pre-built HTML
- No server code runs on user visits
- Ideal for static sites and fast performance

Full Transcript

Static export option in Next.js lets you build pages ahead of time as static HTML files. You write React components and export an async function called getStaticProps that fetches data during the build. Next.js runs getStaticProps once, then renders the page with those props to HTML. Running 'next export' creates static HTML files for all pages using getStaticProps. When users visit, the browser loads the static HTML instantly without running server code. This method is great for fast, static websites. The example code shows getStaticProps returning a message prop, which the page renders inside an h1 tag. The execution table traces each step: calling getStaticProps, rendering the component, generating HTML, and user loading the page. The variable tracker shows the message prop value fixed after build. Key moments clarify why getStaticProps runs only once and how data is static. The quiz tests understanding of message value, when HTML is generated, and what happens if getStaticProps is removed.

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