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.