Static rendering (default) in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to export a React component that renders a heading.

NextJS

export default function Home() {
  return <h1>[1]</h1>;
}

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

A<h1>Welcome</h1>

BWelcome to Next.js!

C"Welcome to Next.js!"

D{Welcome to Next.js!}

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around the text inside JSX.

Trying to return plain text without JSX tags.

The component must return valid JSX. The heading text should be a string inside quotes.

2fill in blank

medium

Complete the code to statically export a page component in Next.js.

NextJS

export default function [1]() {
  return <main>Static content</main>;
}

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

APage

BHome

CApp

DComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using reserved words as function names.

Leaving the function unnamed.

The default export function name can be anything, but 'Home' is a common convention for the main page.

3fill in blank

hard

Fix the error in the static page component by completing the return statement.

NextJS

export default function About() {
  return [1];
}

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

AAbout us

Bdiv>About us</div>

C"About us"

D<div>About us</div>

Attempts:

3 left

💡 Hint

Common Mistakes

Returning plain text without JSX tags.

Missing the opening tag in JSX.

The return must be valid JSX. It needs to be wrapped in a tag like <div>.

4fill in blank

hard

Fill both blanks to create a static page that renders a section with a heading.

NextJS

export default function Contact() {
  return <[1]><h2>[2]</h2></[1]>;
}

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

Asection

Bdiv

CContact us

DGet in touch

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-semantic tags like <div> for main sections.

Using incorrect heading text.

The outer tag should be <section> for semantic meaning, and the heading text should be 'Contact us'.

5fill in blank

hard

Fill all three blanks to create a static Next.js page with a header, main, and footer.

NextJS

export default function Layout() {
  return (
    <>
      <[1]><h1>Site Title</h1></[1]>
      <[2]><p>Welcome to our site.</p></[2]>
      <[3]><small>© 2024</small></[3]>
    </>
  );
}

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

Aheader

Bmain

Cfooter

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-semantic tags like <div> or <section> incorrectly.

Mixing up the order of header, main, and footer.

Use semantic HTML5 tags: <header> for the top, <main> for main content, and <footer> for the bottom.

Practice

1. What does static rendering in Next.js do by default?

easy

A. Builds pages once at build time for fast loading

B. Fetches data on every user request

C. Renders pages only on the client side

D. Updates pages dynamically without rebuilding

Solution

1. Step 1: Understand static rendering concept

   Static rendering means pages are generated once during the build process, not on each request.

2. Step 2: Compare options with static rendering

   Only Builds pages once at build time for fast loading describes building pages once at build time, which matches static rendering.

3. Final Answer:

   Builds pages once at build time for fast loading -> Option A

4. Quick Check:

   Static rendering = build time page generation [OK]

Hint: Static rendering means build once, serve many times [OK]

Common Mistakes:

• Confusing static rendering with server-side rendering
• Thinking pages update on every request
• Assuming static rendering is client-side only

2. Which of the following is the correct way to export a statically rendered page in Next.js?

easy

A. export default class Page extends React.Component {}

B. export async function getServerSideProps() { return { props: {} } }

C. export default function Page() { return Hello }

D. export function getStaticProps() { return { props: {} } }

Solution

1. Step 1: Identify static rendering export style

   Static rendering by default requires exporting a React function component without server-side data fetching.

2. Step 2: Analyze options

   export default function Page() { return
   Hello } exports a simple functional component, which Next.js statically renders by default. export async function getServerSideProps() { return { props: {} } } uses server-side props, which disables static rendering. export default class Page extends React.Component {} uses a class component, which is discouraged. export function getStaticProps() { return { props: {} } } exports getStaticProps but not default component, so incomplete.

3. Final Answer:

   export default function Page() { return <div>Hello</div> } -> Option C

4. Quick Check:

   Default export function = static page [OK]

Hint: Static pages export default function only [OK]

Common Mistakes:

• Using getServerSideProps disables static rendering
• Using class components instead of functions
• Not exporting a default component

3. Given this Next.js page code, what will be the output when visiting the page?

export default function Page() {
  return <h1>Welcome to Next.js!</h1>
}

medium

A. A page showing 'Welcome to Next.js!' rendered statically

B. A server error because no data fetching is defined

C. A blank page because no getStaticProps is used

D. A client-side rendered page only

Solution

1. Step 1: Check the component structure

   The component is a simple function returning an <h1> element with text.

2. Step 2: Understand default rendering behavior

   Without data fetching methods, Next.js statically renders this page at build time.

3. Final Answer:

   A page showing 'Welcome to Next.js!' rendered statically -> Option A

4. Quick Check:

   Simple function component = static render [OK]

Hint: No data fetching means static render by default [OK]

Common Mistakes:

• Expecting runtime errors without data fetching
• Thinking getStaticProps is always required
• Confusing static with client-side rendering

4. Identify the error in this Next.js page that prevents static rendering:

export default function Page() {
  const data = fetch('https://api.example.com/data')
  return <div>{data.title}</div>
}

medium

A. fetch is used inside the component without async/await

B. Static rendering requires getStaticProps for data fetching

C. Using fetch disables static rendering automatically

D. The component must be a class to fetch data

Solution

1. Step 1: Analyze data fetching in component

   The component calls fetch directly inside the function without async/await or data fetching methods.

2. Step 2: Recall static rendering data rules

   Static rendering requires data fetching outside the component using getStaticProps to fetch data at build time.

3. Final Answer:

   Static rendering requires getStaticProps for data fetching -> Option B

4. Quick Check:

   Data fetching for static = getStaticProps [OK]

Hint: Use getStaticProps for build-time data fetch [OK]

Common Mistakes:

• Calling fetch inside component without async
• Assuming fetch disables static rendering
• Thinking class components are required

5. You want to build a blog with mostly fixed posts but occasionally update some posts. How should you use static rendering in Next.js to handle this efficiently?

hard

A. Use client-side rendering to fetch posts on every visit

B. Use only server-side rendering for all posts

C. Build static pages once and never update them

D. Use static rendering with getStaticProps and enable incremental static regeneration

Solution

1. Step 1: Understand blog content update needs

   Most posts are fixed, but some need occasional updates without full rebuilds.

2. Step 2: Identify Next.js feature for this case

   Incremental Static Regeneration (ISR) allows static pages to update after build time on demand.

3. Step 3: Match option with ISR usage

   Use static rendering with getStaticProps and enable incremental static regeneration uses getStaticProps with ISR, enabling static rendering plus updates efficiently.

4. Final Answer:

   Use static rendering with getStaticProps and enable incremental static regeneration -> Option D

5. Quick Check:

   ISR + getStaticProps = static + updates [OK]

Hint: Use ISR to update static pages without full rebuilds [OK]

Common Mistakes:

• Choosing server-side rendering for mostly fixed content
• Ignoring ISR for occasional updates
• Assuming static pages cannot update after build