Client-only modules in NextJS - Mini Project: Build & Apply

Using Client-Only Modules in Next.js

📖 Scenario: You are building a Next.js app that needs to use a module which only works in the browser, such as a date picker library that accesses window.

🎯 Goal: Create a Next.js component that imports and uses a client-only module safely, ensuring it does not run on the server.

📋 What You'll Learn

Create a React component called DatePickerWrapper.

Use Next.js dynamic import with ssr: false to load the client-only DatePicker module.

Render the dynamically imported DatePicker inside DatePickerWrapper.

Add a simple state to hold the selected date.

💡 Why This Matters

🌍 Real World

Many UI libraries or browser APIs only work in the browser. Using client-only modules in Next.js ensures these libraries load without breaking server-side rendering.

💼 Career

Understanding client-only modules is essential for Next.js developers to integrate third-party UI components and browser-specific features correctly.

1

Create the initial component file

Create a React functional component called DatePickerWrapper that returns a div with the text Loading date picker....

NextJS

export default function DatePickerWrapper() {
  return Loading date picker...
  // Your code here
}

Need a hint?

This is the basic React component setup that will later load the client-only module.

2

Add dynamic import for client-only module

Import dynamic from next/dynamic. Use dynamic to import a module named DatePicker from 'react-datepicker' with ssr: false. Assign this to a constant called DynamicDatePicker.

NextJS

import dynamic from 'next/dynamic'

export default function DatePickerWrapper() {
  return Loading date picker...
  // Your code here
}

Need a hint?

Use Next.js dynamic import with ssr: false to load the client-only module only on the client side.

3

Add state to hold the selected date

Import useState from react. Inside DatePickerWrapper, create a state variable called startDate with initial value null using useState. Return a div containing the text Select a date:.

NextJS

import dynamic from 'next/dynamic'
import { useState } from 'react'

const DynamicDatePicker = dynamic(() => import('react-datepicker'), { ssr: false })

export default function DatePickerWrapper() {
  // Your code here
}

Need a hint?

Use React's useState hook to hold the selected date value.

4

Render the client-only DatePicker with state

Inside DatePickerWrapper, replace the div with a div containing the text Select a date: and the DynamicDatePicker component. Pass selected={startDate} and onChange={date => setStartDate(date)} props to DynamicDatePicker.

NextJS

import dynamic from 'next/dynamic'
import { useState } from 'react'

const DynamicDatePicker = dynamic(() => import('react-datepicker'), { ssr: false })

export default function DatePickerWrapper() {
  const [startDate, setStartDate] = useState(null)
  // Your code here
}

Need a hint?

Render the dynamically imported DatePicker component with the selected date state and update function.