Force-dynamic and force-static in NextJS - Mini Project: Build & Apply

Using force-dynamic and force-static in Next.js

📖 Scenario: You are building a simple Next.js page that shows a greeting message. You want to control whether the page is rendered dynamically on each request or statically at build time.

🎯 Goal: Create a Next.js page that uses export const dynamic = 'force-dynamic' to make the page render dynamically, then change it to export const dynamic = 'force-static' to make it render statically.

📋 What You'll Learn

Create a Next.js page component named GreetingPage that returns a simple greeting message inside a <main> element.

Add an export named dynamic with the value 'force-dynamic' to make the page render dynamically.

Change the dynamic export value to 'force-static' to make the page render statically.

Ensure the page component and export are correctly structured for Next.js 14+ App Router.

💡 Why This Matters

🌍 Real World

Controlling whether a Next.js page renders dynamically or statically helps optimize performance and user experience depending on the content freshness needed.

💼 Career

Understanding force-dynamic and force-static exports is important for Next.js developers to build efficient, scalable web applications with proper rendering strategies.

1

Create the Next.js page component

Create a React functional component named GreetingPage that returns a <main> element with the text Hello, welcome to Next.js!.

NextJS

function GreetingPage() {
    // Your code here
}

Need a hint?

Use a function named GreetingPage that returns JSX with a <main> tag and the greeting text.

2

Add force-dynamic export

Add an export named dynamic with the exact value 'force-dynamic' below the GreetingPage component to make the page render dynamically.

NextJS

function GreetingPage() {
    return Hello, welcome to Next.js!;
}

export default GreetingPage;

// Add export const dynamic = 'force-dynamic' below

Need a hint?

Write export const dynamic = 'force-dynamic'; exactly as shown.

3

Change to force-static export

Change the existing export named dynamic to have the exact value 'force-static' instead of 'force-dynamic'.

NextJS

function GreetingPage() {
    return Hello, welcome to Next.js!;
}

export const dynamic = 'force-static'; // Change value here

export default GreetingPage;

Need a hint?

Replace 'force-dynamic' with 'force-static' in the export statement.

4

Complete the Next.js page with static rendering

Ensure the page component GreetingPage and the export dynamic = 'force-static' are correctly structured and exported for Next.js 14+ App Router.

NextJS

function GreetingPage() {
    return Hello, welcome to Next.js!;
}

export const dynamic = 'force-static';

export default GreetingPage;

// Finalize the page export

Need a hint?

Make sure the component and export statements are present and correct.