Static export option in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of a Next.js page using getStaticProps when statically exported?

Consider a Next.js page that uses getStaticProps to fetch data at build time. What will be the behavior of this page when you run next export to create a static export?

NextJS

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

export default function Page({ message }) {
  return <div>{message}</div>;
}

A The page will fetch the message on every request from the server, so it is not fully static.

B The page will render an empty div because static export ignores <code>getStaticProps</code>.

C The page will fail to build because <code>getStaticProps</code> is not compatible with static export.

D The page will render the message at build time and serve a fully static HTML file with the message included.

💡 Hint

Think about when getStaticProps runs and what next export does.

getStaticProps runs at build time and fetches data to be included in the static HTML. When you run next export, Next.js generates static HTML files with the data already included. So the page serves fully static content with the message visible immediately.

📝 Syntax

intermediate

Which option correctly disables server-side rendering for a Next.js page to enable static export?

You want to ensure a Next.js page is fully static and does not use server-side rendering. Which code snippet correctly achieves this for static export?

A export const getServerSideProps = async () => ({ props: {} });

B export const getStaticProps = async () => ({ props: {} });

C export const getInitialProps = async () => ({ props: {} });

D export default function Page() { return <div>Static</div>; }

💡 Hint

Which data fetching method runs at build time?

getStaticProps runs at build time and enables static generation. getServerSideProps runs on every request and disables static export. getInitialProps is legacy and not compatible with static export. A page without data fetching can be static, but to explicitly disable SSR and fetch data at build time, use getStaticProps.

🔧 Debug

advanced

Why does next export fail when using getServerSideProps?

You run next export on a Next.js project, but the build fails with an error related to getServerSideProps. Why does this happen?

NextJS

export async function getServerSideProps() {
  return { props: { time: Date.now() } };
}

export default function Page({ time }) {
  return <div>{time}</div>;
}

A <code>getServerSideProps</code> requires a Node.js server at runtime, which <code>next export</code> does not support.

B <code>next export</code> only supports pages without any data fetching methods.

C <code>getServerSideProps</code> is deprecated and cannot be used with Next.js 14+.

D <code>getServerSideProps</code> causes a syntax error during static export.

💡 Hint

Think about what next export produces and what getServerSideProps needs.

getServerSideProps runs on the server for every request, so it requires a Node.js server at runtime. next export generates static HTML files and does not run a server, so it cannot support getServerSideProps. This causes the build to fail.

❓ state_output

advanced

What will be the content of the exported HTML for a page using getStaticProps with dynamic data?

Given this Next.js page, what will the static HTML contain after running next export?

NextJS

export async function getStaticProps() {
  const date = new Date().toISOString();
  return { props: { date } };
}

export default function Page({ date }) {
  return <div>Build time: {date}</div>;
}

A The HTML will show the exact build time ISO string captured during export.

B The HTML will show the current time when the user opens the page.

C The HTML will be empty because dates cannot be serialized in static export.

D The HTML will show a placeholder text instead of the date.

💡 Hint

Remember when getStaticProps runs and what data is included in static HTML.

getStaticProps runs once at build time and fetches the current date. This date is included in the static HTML generated by next export. So the HTML shows the build time, not the current time when the user visits.

🧠 Conceptual

expert

Which limitation applies to Next.js static export (next export) compared to server rendering?

Select the correct limitation of using next export for static export in Next.js projects.

A You cannot deploy static exports to any CDN because they require a Node.js server.

B You cannot use any React components with hooks because static export only supports class components.

C You cannot use API routes or server-side code because static export produces only static files.

D You cannot use CSS modules because static export does not support CSS imports.

💡 Hint

Think about what static export produces and what features require server runtime.

next export generates static HTML and assets only. It does not support API routes or any server-side code because there is no server to run them. React hooks and CSS modules work fine with static export. Static exports can be deployed to CDNs easily.

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