Interleaving server and client in NextJS - Mini Project: Build & Apply

Interleaving Server and Client in Next.js

📖 Scenario: You are building a simple Next.js app that shows a list of books fetched from the server and allows users to add a new book on the client side.This project will teach you how to combine server components and client components in Next.js 14 using the App Router.

🎯 Goal: Create a Next.js app with a server component that fetches and displays a list of books, and a client component that lets users add a new book to the list.

📋 What You'll Learn

Create a server component that fetches a list of books

Create a client component with a form to add a new book

Use React hooks in the client component

Interleave the client component inside the server component

Use Next.js App Router conventions

💡 Why This Matters

🌍 Real World

Many modern web apps use Next.js to fetch data on the server for fast loading and SEO, while using client components for interactive features like forms and buttons.

💼 Career

Understanding how to interleave server and client components is essential for building scalable, performant React apps with Next.js, a popular framework used by many companies.

1

Create the initial books data array

Create a server component called BooksList that defines a constant array books with these exact objects: { id: 1, title: 'The Hobbit' }, { id: 2, title: '1984' }, and { id: 3, title: 'Pride and Prejudice' }.

NextJS

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

Need a hint?

Define a constant array named books inside the BooksList function.

2

Add a client component for adding books

Create a client component called AddBookForm that uses useState to hold a title string and a function setTitle. Initialize title to an empty string.

NextJS

export default function BooksList() {
  const books = [
    { id: 1, title: 'The Hobbit' },
    { id: 2, title: '1984' },
    { id: 3, title: 'Pride and Prejudice' }
  ];
}

'use client';
import { useState } from 'react';

function AddBookForm() {
  // Your code here
}

Need a hint?

Use useState to create title and setTitle inside AddBookForm.

3

Render the books list and add the client form

Inside the BooksList server component, return a <div> that contains an <h2> with text 'Books', an unordered list <ul> that maps over books to render each book's title inside a <li> with a key of book.id, and include the <AddBookForm /> client component below the list.

NextJS

export default function BooksList() {
  const books = [
    { id: 1, title: 'The Hobbit' },
    { id: 2, title: '1984' },
    { id: 3, title: 'Pride and Prejudice' }
  ];

  // Your code here
}

'use client';
import { useState } from 'react';

function AddBookForm() {
  const [title, setTitle] = useState('');
}

Need a hint?

Use JSX to render the list and include the AddBookForm component inside the BooksList return.

4

Complete the client form with input and button

Inside the AddBookForm client component, return a <form> with an <input> of type 'text' that has value bound to title and an onChange handler that updates title using setTitle. Add a <button> with text 'Add Book' and type 'submit'.

NextJS

export default function BooksList() {
  const books = [
    { id: 1, title: 'The Hobbit' },
    { id: 2, title: '1984' },
    { id: 3, title: 'Pride and Prejudice' }
  ];

  return (
    
      Books
      
        {books.map(book => (
          {book.title}
        ))}
      
      
    
  );
}

'use client';
import { useState } from 'react';

function AddBookForm() {
  const [title, setTitle] = useState('');

  // Your code here
}

Need a hint?

Use JSX to create a form with controlled input and a submit button inside AddBookForm.