Static export option in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the Static Export option in Next.js do?

It generates a fully static version of your website by pre-rendering all pages as HTML files at build time, so they can be served without a server.

beginner

Which Next.js command triggers the Static Export process?

The command next export runs after next build to create static HTML files for your app.

intermediate

What file does Next.js generate to configure static export settings?

The next.config.js file can include the output: 'export' setting to enable static export.

intermediate

Can Next.js static export handle dynamic routes with server-side data fetching?

No, static export only supports pages that can be fully rendered at build time without server-side code or API calls.

beginner

Why is static export useful for deploying to static hosting services?

Because it creates plain HTML, CSS, and JS files, which can be hosted on services like GitHub Pages or Netlify without needing a Node.js server.

Which command do you run to create a static export in Next.js?

A next export

B next start

C next dev

D next build

The next export command generates static HTML files after building the app.

What must be true about pages to use static export in Next.js?

A They must fetch data on every request

B They must use server-side rendering

C They must be fully renderable at build time without server code

D They must use API routes

Static export only works if pages can be pre-rendered fully at build time.

Where do you set the static export option in Next.js?

A package.json scripts

B public folder

C pages/_app.js

D next.config.js with output: 'export'

The next.config.js file controls build options including static export.

What type of hosting is best suited for Next.js static export output?

A Serverless functions only

B Static hosting like Netlify or GitHub Pages

C Node.js server hosting

D Database hosting

Static export output is plain files that static hosts serve efficiently.

Can Next.js static export handle API routes?

A No, API routes require a server

B Yes, automatically

C Only if using serverless functions

D Only with special plugins

API routes need a server environment and are not supported in static export.

Explain how the Static Export option works in Next.js and when you would use it.

Think about how your website can be fully prepared before users visit.

Describe the steps to configure and run a static export in a Next.js project.

Focus on configuration and commands.

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