Build a Simple Next.js Interactive Address Book App

In today’s interconnected world, managing contacts efficiently is crucial, both for personal and professional use. From keeping track of friends and family to organizing business associates, a well-structured address book is an indispensable tool. While dedicated contact management software exists, building your own address book application offers a unique opportunity to learn fundamental web development concepts, specifically within the powerful Next.js framework. This article will guide you through creating a simple, yet functional, interactive address book using Next.js, suitable for beginners to intermediate developers. We’ll cover everything from setting up your project to implementing features like adding, editing, and deleting contacts, all while emphasizing best practices and SEO optimization.

Why Build an Address Book with Next.js?

Next.js provides an excellent platform for this project due to several key advantages:

• Server-Side Rendering (SSR) and Static Site Generation (SSG): Next.js allows you to choose how your pages are rendered, improving SEO and initial load times.
• React-Based: Leveraging the React ecosystem provides a familiar and robust environment for building user interfaces.
• Built-in Routing: Next.js simplifies navigation with its intuitive file-system-based routing.
• API Routes: Easily create API endpoints to handle data operations.
• Developer Experience: Features like hot reloading and TypeScript support enhance productivity.

By building an address book, you’ll gain hands-on experience with these Next.js features, solidifying your understanding of web development fundamentals.

Project Setup: Setting the Stage

Before diving into the code, let’s set up our Next.js project.

1. Create a New Next.js App: Open your terminal and run the following command to create a new Next.js project. We’ll name our project “address-book-app”.

npx create-next-app@latest address-book-app

2. Navigate to the Project Directory: Change your working directory to the newly created project folder.

cd address-book-app

3. Start the Development Server: Run the development server to see your initial Next.js app in action.

npm run dev

This will start the development server, usually on http://localhost:3000. Open this in your browser to see the default Next.js welcome page.

Structuring the Address Book: Components and Data

Now, let’s think about the structure of our address book application. We’ll need a few key components:

• ContactList: Displays a list of contacts.
• ContactForm: Allows users to add or edit contact information.
• ContactDetails (Optional): Displays detailed information about a single contact.

We’ll also need a way to store our contact data. For simplicity, we’ll start by storing the data in local state within our application. Later, we can explore options like using a database or external API for persistent storage.

Creating the ContactList Component

Let’s create the `ContactList` component. This component will render a list of contacts. Create a new file named `components/ContactList.js` in your project directory. Inside this file, add the following code:

import React from 'react';

function ContactList({ contacts, onEdit, onDelete }) {
  return (
    <div>
      <h2>Contacts</h2>
      <ul>
        {contacts.map((contact) => (
          <li key={contact.id}>
            {contact.name} - {contact.phone}
            <button onClick={() => onEdit(contact.id)}>Edit</button>
            <button onClick={() => onDelete(contact.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ContactList;

This component receives `contacts`, `onEdit`, and `onDelete` as props. It iterates over the `contacts` array and renders a list item (`<li>`) for each contact, displaying their name and phone number, along with “Edit” and “Delete” buttons. The `onEdit` and `onDelete` props are functions that will be called when the respective buttons are clicked. Make sure to pass in the `contact.id` to identify which contact to edit or delete.

Creating the ContactForm Component

Next, let’s create the `ContactForm` component, which will handle adding and editing contacts. Create a new file named `components/ContactForm.js` and add the following code:

import React, { useState, useEffect } from 'react';

function ContactForm({ contact, onSubmit }) {
  const [name, setName] = useState(contact?.name || '');
  const [phone, setPhone] = useState(contact?.phone || '');
  const [email, setEmail] = useState(contact?.email || '');

  useEffect(() => {
    setName(contact?.name || '');
    setPhone(contact?.phone || '');
    setEmail(contact?.email || '');
  }, [contact]);

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit({ id: contact?.id, name, phone, email });
    setName('');
    setPhone('');
    setEmail('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>{contact?.id ? 'Edit Contact' : 'Add Contact'}</h2>
      <div>
        <label htmlFor="name">Name:</label>
        <input
          type="text"
          id="name"
          value={name}
          onChange={(e) => setName(e.target.value)}
          required
        />
      </div>
      <div>
        <label htmlFor="phone">Phone:</label>
        <input
          type="tel"
          id="phone"
          value={phone}
          onChange={(e) => setPhone(e.target.value)}
          required
        />
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </div>
      <button type="submit">{contact?.id ? 'Update' : 'Add'}</button>
    </form>
  );
}

export default ContactForm;

This component uses the `useState` hook to manage the form input values. It also uses the `useEffect` hook to update the form fields when the `contact` prop changes (e.g., when editing an existing contact). The `handleSubmit` function is called when the form is submitted, which calls the `onSubmit` prop (a function provided by the parent component) with the contact data. The conditional rendering of the “Add” or “Update” button and the header changes depending on whether a contact is being edited or added.

Integrating Components in the Main Page

Now, let’s integrate these components into our main page (`pages/index.js`). Replace the content of `pages/index.js` with the following code:

import React, { useState } from 'react';
import ContactList from '../components/ContactList';
import ContactForm from '../components/ContactForm';

function HomePage() {
  const [contacts, setContacts] = useState([]);
  const [editingContact, setEditingContact] = useState(null);

  const handleAddContact = (newContact) => {
    if (newContact.id) {
      // Editing existing contact
      setContacts(contacts.map(contact => contact.id === newContact.id ? newContact : contact));
      setEditingContact(null);
    } else {
      // Adding new contact
      const newId = contacts.length > 0 ? Math.max(...contacts.map(contact => contact.id)) + 1 : 1;
      setContacts([...contacts, { ...newContact, id: newId }]);
    }
  };

  const handleEditContact = (id) => {
    const contactToEdit = contacts.find(contact => contact.id === id);
    setEditingContact(contactToEdit);
  };

  const handleDeleteContact = (id) => {
    setContacts(contacts.filter(contact => contact.id !== id));
  };

  return (
    <div>
      <ContactForm
        contact={editingContact}
        onSubmit={handleAddContact}
      />
      <ContactList
        contacts={contacts}
        onEdit={handleEditContact}
        onDelete={handleDeleteContact}
      />
    </div>
  );
}

export default HomePage;

In this page:

• We import the `ContactList` and `ContactForm` components.
• We use the `useState` hook to manage the `contacts` array (the list of contacts) and `editingContact` (the contact being edited).
• `handleAddContact` is called when the form is submitted. It either adds a new contact to the `contacts` array or updates an existing one, depending on whether `newContact.id` is present.
• `handleEditContact` sets the `editingContact` state to the contact to be edited.
• `handleDeleteContact` removes a contact from the `contacts` array.
• The `ContactForm` and `ContactList` components are rendered, passing the necessary props.

Adding Functionality: CRUD Operations

Our address book now has the basic structure and components. Let’s make it fully functional by implementing the CRUD (Create, Read, Update, Delete) operations.

Create (Adding Contacts)

The `ContactForm` component handles the creation of new contacts. When the form is submitted, the `handleAddContact` function in `pages/index.js` is called. This function takes the new contact data and adds it to the `contacts` state. We already implemented this in the previous step.

Read (Displaying Contacts)

The `ContactList` component displays the existing contacts. It receives the `contacts` array as a prop and renders each contact’s information. This part is already implemented.

Update (Editing Contacts)

To edit a contact:

1. Clicking the “Edit” button in the `ContactList` component calls the `handleEditContact` function in `pages/index.js`.
2. `handleEditContact` sets the `editingContact` state to the selected contact.
3. The `ContactForm` component is rendered with the `editingContact` data pre-filled.
4. When the form is submitted, `handleAddContact` is called. If `newContact.id` is present, it updates the existing contact in the `contacts` array. This is also handled in `pages/index.js`.

Delete (Deleting Contacts)

To delete a contact:

1. Clicking the “Delete” button in the `ContactList` component calls the `handleDeleteContact` function in `pages/index.js`.
2. `handleDeleteContact` filters the `contacts` array, removing the contact with the matching ID.

Enhancing the User Experience: Styling and Features

While our address book is functional, it can be improved with styling and additional features. Here are some suggestions:

Styling with CSS Modules or Styled Components

To make your address book visually appealing, you can add styling. Next.js supports different styling approaches:

• CSS Modules: Create CSS files (e.g., `ContactList.module.css`) and import them into your components. This provides scoped styles, preventing style conflicts.
• Styled Components: Use a library like `styled-components` to write CSS-in-JS, allowing you to define styles directly within your JavaScript components.
• Global CSS: Add global styles in the `styles/globals.css` file.

Here’s a simple example using CSS Modules for the `ContactList` component:

First, create a `ContactList.module.css` file in the `components` directory:

.contactList {
  list-style: none;
  padding: 0;
}

.contactItem {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contactItem button {
  margin-left: 10px;
}

Then, import and use the styles in `ContactList.js`:

import React from 'react';
import styles from './ContactList.module.css';

function ContactList({ contacts, onEdit, onDelete }) {
  return (
    <div>
      <h2>Contacts</h2>
      <ul className={styles.contactList}>
        {contacts.map((contact) => (
          <li key={contact.id} className={styles.contactItem}>
            {contact.name} - {contact.phone}
            <button onClick={() => onEdit(contact.id)}>Edit</button>
            <button onClick={() => onDelete(contact.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ContactList;

Adding Input Validation

To improve data quality, add input validation to the `ContactForm` component. You can use HTML5 validation attributes (e.g., `required`, `type=”email”`) or a library like Formik or React Hook Form for more complex validation rules.

Example using HTML5 `required` attribute:

<input
  type="text"
  id="name"
  value={name}
  onChange={(e) => setName(e.target.value)}
  required // Add this
/>

Implementing Search Functionality

Implement a search bar to filter contacts by name or other fields. Add a search input field in the main page (`pages/index.js`) and filter the `contacts` array based on the search input.

import React, { useState } from 'react';
import ContactList from '../components/ContactList';
import ContactForm from '../components/ContactForm';

function HomePage() {
  const [contacts, setContacts] = useState([]);
  const [editingContact, setEditingContact] = useState(null);
  const [searchTerm, setSearchTerm] = useState('');

  const filteredContacts = contacts.filter(contact =>
    contact.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  // ... (rest of the code)

  return (
    <div>
      <input
        type="text"
        placeholder="Search by name"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <ContactForm
        contact={editingContact}
        onSubmit={handleAddContact}
      />
      <ContactList
        contacts={filteredContacts}
        onEdit={handleEditContact}
        onDelete={handleDeleteContact}
      />
    </div>
  );
}

export default HomePage;

Adding Contact Details Page (Optional)

Create a separate page to display detailed information about a single contact. This would involve creating a new page (e.g., `pages/contact/[id].js`) and using dynamic routes in Next.js. You’d need to modify the `ContactList` component to link to this new page, passing the contact’s ID as a parameter.

Using a Database (Optional)

For persistent storage, consider using a database. You can use:

• A local database: Such as SQLite, for local development and simpler projects.
• A cloud database: Such as MongoDB, PostgreSQL (with services like Supabase or Vercel Postgres), or Firebase for more robust and scalable solutions.

Next.js provides API routes to interact with databases. You can create API endpoints to perform CRUD operations on your database.

SEO Best Practices

To ensure your address book app ranks well in search results, follow SEO best practices:

• Use Descriptive Titles and Meta Descriptions: In your `pages/_document.js` file (create it if it doesn’t exist), set appropriate `