Static export option in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to export a Next.js page as a static HTML file.

NextJS

export default function Home() {
  return <h1>Hello, Next.js!</h1>;
}

export async function [1]() {
  return { props: {} };
}

Drag options to blanks, or click blank then click option'

AgetStaticProps

BgetServerSideProps

CgetInitialProps

DgetStaticPaths

Attempts:

3 left

💡 Hint

Common Mistakes

Using getServerSideProps which runs on every request, not static export.

Confusing getStaticPaths which is for dynamic routes.

The getStaticProps function tells Next.js to generate the page at build time, enabling static export.

2fill in blank

medium

Complete the code to enable static export by adding the correct config option.

NextJS

const nextConfig = {
  [1]
};

export default nextConfig;

Drag options to blanks, or click blank then click option'

Aoutput: 'standalone'

BoutputStandalone

Cssr

Doutput: 'export'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'ssr' which is unrelated to static export.

Confusing 'standalone' output with 'export'.

Setting output: 'export' in next.config.js enables static HTML export.

3fill in blank

hard

Fix the error in the static export config by choosing the correct option.

NextJS

module.exports = {
  output: [1]
};

Drag options to blanks, or click blank then click option'

A'server'

B'export'

C'standalone'

D'static'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'standalone' which is for a different build mode.

Using 'static' which is not a valid output value.

The correct value for static export is 'export'. Other values do not enable static HTML export.

4fill in blank

hard

Fill both blanks to create a static page with dynamic paths.

NextJS

export async function [1]() {
  return {
    paths: [{ params: { id: '1' } }],
    [2]: false
  };
}

Drag options to blanks, or click blank then click option'

AgetStaticPaths

BgetStaticProps

Cfallback

Drevalidate

Attempts:

3 left

💡 Hint

Common Mistakes

Using getStaticProps instead of getStaticPaths for paths.

Confusing fallback with revalidate.

getStaticPaths defines dynamic routes for static export, and fallback controls behavior for missing paths.

5fill in blank

hard

Fill all three blanks to export a static page with props and fallback.

NextJS

export async function [1]() {
  return { props: { message: 'Hello' } };
}

export async function [2]() {
  return {
    paths: [],
    [3]: true
  };
}

Drag options to blanks, or click blank then click option'

AgetStaticProps

BgetStaticPaths

Cfallback

DgetServerSideProps

Attempts:

3 left

💡 Hint

Common Mistakes

Using getServerSideProps which disables static export.

Confusing fallback with revalidate or other options.

getStaticProps provides props for the page, getStaticPaths defines dynamic routes, and fallback enables fallback rendering.

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