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.