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.