Build a Simple Next.js Interactive Bookmarking App

Written by

FixTechToday

in

In today’s digital world, we’re constantly bombarded with information. Finding and saving valuable resources for later reference is a common challenge. Imagine stumbling upon an amazing article, a helpful tutorial, or a product you want to buy, only to lose track of it amidst the endless sea of web pages. This is where a bookmarking application comes to the rescue. Building a personalized bookmarking app isn’t just a convenient solution; it’s a practical way to organize your digital life and improve your productivity. We’ll dive into how to construct a simple yet effective bookmarking app using Next.js, a powerful React framework, perfect for beginners and intermediate developers alike.

Why Build a Bookmarking App with Next.js?

Next.js provides several advantages that make it an excellent choice for this project:

  • Server-Side Rendering (SSR) & Static Site Generation (SSG): Next.js allows your app to render on the server or generate static pages, improving SEO and initial load times. This is crucial for a bookmarking app, where quick access to saved links is essential.
  • Routing: Next.js simplifies routing with its file-system based router. No complex configuration is needed; just create files in the pages directory, and you have routes.
  • API Routes: Easily create API endpoints within your Next.js application to handle data storage and retrieval. This is perfect for managing your bookmarks.
  • React Ecosystem: Next.js is built on React, giving you access to the vast React ecosystem, including component libraries, state management solutions, and more.
  • Developer Experience: Next.js is designed with developers in mind, offering features like hot reloading, fast builds, and a great development server.

Building a bookmarking app will allow you to learn fundamental Next.js concepts, including:

  • Creating Components
  • Handling User Input
  • Managing State
  • Making API Requests
  • Storing and Retrieving Data (using local storage initially)
  • Implementing Routing

Setting Up Your Next.js Project

Let’s start by setting up a new Next.js project. Open your terminal and run the following command:

npx create-next-app bookmarking-app

This command will create a new directory called bookmarking-app and install all the necessary dependencies. Navigate into the project directory:

cd bookmarking-app

Now, start the development server:

npm run dev

Your app should now be running at http://localhost:3000. You should see the default Next.js welcome page. This confirms that your project is set up correctly.

Building the Bookmark Form Component

The first step is to create a form where users can add their bookmarks. We’ll create a new component for this. In your components directory (you may need to create this directory), create a file called BookmarkForm.js. Paste the following code into the file:

import { useState } from 'react';

function BookmarkForm({ onAddBookmark }) {
  const [url, setUrl] = useState('');
  const [title, setTitle] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!url || !title) return;
    onAddBookmark({ url, title });
    setUrl('');
    setTitle('');
  };

  return (
    <form onSubmit={handleSubmit} style={{ marginBottom: '20px' }}>
      <label htmlFor="url">URL:</label>
      <input
        type="text"
        id="url"
        value={url}
        onChange={(e) => setUrl(e.target.value)}
        style={{ marginRight: '10px' }}
      />

      <label htmlFor="title">Title:</label>
      <input
        type="text"
        id="title"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        style={{ marginRight: '10px' }}
      />

      <button type="submit">Add Bookmark</button>
    </form>
  );
}

export default BookmarkForm;

Let’s break down this component:

  • State Management: We use the useState hook to manage the url and title input fields.
  • Input Fields: Two input fields allow users to enter the URL and title of the bookmark.
  • handleSubmit Function: This function is called when the form is submitted. It prevents the default form submission behavior, calls the onAddBookmark prop function (which we’ll define later), and clears the input fields.
  • onAddBookmark Prop: This prop is a function that will be passed from the parent component (pages/index.js) and will be responsible for handling the addition of the bookmark to the list.

Displaying Bookmarks: The BookmarkList Component

Next, let’s create a component to display the list of bookmarks. Create a file named BookmarkList.js in the components directory and add the following code:

function BookmarkList({ bookmarks }) {
  return (
    <ul>
      {bookmarks.map((bookmark, index) => (
        <li key={index} style={{ marginBottom: '5px' }}>
          <a href={bookmark.url} target="_blank" rel="noopener noreferrer">
            {bookmark.title}
          </a>
        </li>
      ))}
    </ul>
  );
}

export default BookmarkList;

Explanation:

  • bookmarks Prop: This component receives an array of bookmarks as a prop.
  • Mapping Bookmarks: It iterates over the bookmarks array using the map function, rendering a list item (<li>) for each bookmark.
  • Link: Each bookmark is displayed as a link (<a>) that opens in a new tab (target="_blank" rel="noopener noreferrer") to the specified URL.

Integrating Components into the Main Page (pages/index.js)

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

import { useState, useEffect } from 'react';
import BookmarkForm from '../components/BookmarkForm';
import BookmarkList from '../components/BookmarkList';

function Home() {
  const [bookmarks, setBookmarks] = useState([]);

  useEffect(() => {
    // Load bookmarks from local storage on component mount
    if (typeof window !== 'undefined') {
      const storedBookmarks = localStorage.getItem('bookmarks');
      if (storedBookmarks) {
        setBookmarks(JSON.parse(storedBookmarks));
      }
    }
  }, []);

  useEffect(() => {
    // Save bookmarks to local storage whenever the bookmarks state changes
    if (typeof window !== 'undefined') {
      localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
    }
  }, [bookmarks]);

  const handleAddBookmark = (newBookmark) => {
    setBookmarks([...bookmarks, newBookmark]);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>My Bookmarks</h2>
      <BookmarkForm onAddBookmark={handleAddBookmark} />
      <BookmarkList bookmarks={bookmarks} />
    </div>
  );
}

export default Home;

Let’s break down this page:

  • Importing Components: We import the BookmarkForm and BookmarkList components.
  • State Management (bookmarks): We use the useState hook to manage the array of bookmarks.
  • useEffect Hook (Loading from Local Storage): We use the useEffect hook with an empty dependency array ([]) to load bookmarks from localStorage when the component mounts. This ensures that the bookmarks persist even if the user refreshes the page. We check for typeof window !== 'undefined' to ensure this code runs only in the browser and not during server-side rendering.
  • useEffect Hook (Saving to Local Storage): This useEffect hook is used to save the bookmarks array to localStorage whenever the bookmarks state changes. It has [bookmarks] as a dependency, so it runs whenever the bookmarks are updated. We also check for typeof window !== 'undefined' here for the same reason.
  • handleAddBookmark Function: This function is passed as a prop to the BookmarkForm component. It takes a newBookmark object as an argument and updates the bookmarks state by adding the new bookmark to the array.
  • Rendering Components: The BookmarkForm and BookmarkList components are rendered, passing the necessary props (onAddBookmark and bookmarks, respectively).

At this point, you should have a functional bookmarking app. You can add bookmarks using the form, and they will be displayed in the list. The bookmarks will also persist across page refreshes thanks to the local storage implementation.

Adding Basic Styling

While the app is functional, it could use some styling to improve its appearance. Let’s add some basic styling to make it more user-friendly. You can add these styles directly to the components using inline styles, or you can create a CSS file (e.g., styles/global.css and import it into pages/_app.js) for a more organized approach. For simplicity, we’ll use inline styles in this example.

Here’s an example of how you can enhance the styling:

BookmarkForm.js (Updated)

import { useState } from 'react';

function BookmarkForm({ onAddBookmark }) {
  const [url, setUrl] = useState('');
  const [title, setTitle] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!url || !title) return;
    onAddBookmark({ url, title });
    setUrl('');
    setTitle('');
  };

  return (
    <form onSubmit={handleSubmit} style={{ marginBottom: '20px', display: 'flex', flexDirection: 'column', maxWidth: '300px' }}>
      <label htmlFor="url" style={{ marginBottom: '5px' }}>URL:</label>
      <input
        type="text"
        id="url"
        value={url}
        onChange={(e) => setUrl(e.target.value)}
        style={{ marginBottom: '10px', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
      />

      <label htmlFor="title" style={{ marginBottom: '5px' }}>Title:</label>
      <input
        type="text"
        id="title"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        style={{ marginBottom: '10px', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
      />

      <button type="submit" style={{ backgroundColor: '#4CAF50', color: 'white', padding: '10px 15px', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>Add Bookmark</button>
    </form>
  );
}

export default BookmarkForm;

BookmarkList.js (Updated)


function BookmarkList({ bookmarks }) {
  return (
    <ul style={{ listStyleType: 'none', padding: 0 }}>
      {bookmarks.map((bookmark, index) => (
        <li key={index} style={{ marginBottom: '5px' }}>
          <a href={bookmark.url} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', color: '#0070f3', display: 'block', padding: '10px', border: '1px solid #eee', borderRadius: '4px' }}>
            {bookmark.title}
          </a>
        </li>
      ))}
    </ul>
  );
}

export default BookmarkList;

pages/index.js (Updated)

import { useState, useEffect } from 'react';
import BookmarkForm from '../components/BookmarkForm';
import BookmarkList from '../components/BookmarkList';

function Home() {
  const [bookmarks, setBookmarks] = useState([]);

  useEffect(() => {
    if (typeof window !== 'undefined') {
      const storedBookmarks = localStorage.getItem('bookmarks');
      if (storedBookmarks) {
        setBookmarks(JSON.parse(storedBookmarks));
      }
    }
  }, []);

  useEffect(() => {
    if (typeof window !== 'undefined') {
      localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
    }
  }, [bookmarks]);

  const handleAddBookmark = (newBookmark) => {
    setBookmarks([...bookmarks, newBookmark]);
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <h2 style={{ marginBottom: '20px' }}>My Bookmarks</h2>
      <BookmarkForm onAddBookmark={handleAddBookmark} />
      <BookmarkList bookmarks={bookmarks} />
    </div>
  );
}

export default Home;

These are just examples; feel free to customize the styling to your preference. Consider adding a more visually appealing design, such as using a consistent color scheme, adding padding and margins, and adjusting the font styles.

Adding Error Handling

Our application currently lacks error handling. What happens if the user enters an invalid URL or if the local storage fails? Let’s add some basic error handling to improve the user experience.

First, we can add validation to the BookmarkForm to check if the URL is valid. Update the handleSubmit function in BookmarkForm.js:

const handleSubmit = (e) => {
  e.preventDefault();
  if (!url || !title) {
    alert('Please enter both URL and Title.');
    return;
  }

  try {
    new URL(url); // Check if the URL is valid
  } catch (error) {
    alert('Please enter a valid URL.');
    return;
  }

  onAddBookmark({ url, title });
  setUrl('');
  setTitle('');
};

This code adds a check to ensure that both the URL and title fields are filled. It also uses the URL constructor to validate the URL format. If the URL is invalid, an alert message will inform the user. This is a simple but effective way to prevent invalid bookmarks from being added.

For more robust error handling, consider using a state variable to display error messages within the UI instead of using alerts. This provides a better user experience.

Expanding Functionality: Removing Bookmarks

A basic bookmarking app should also allow users to remove bookmarks. Let’s add a delete functionality.

First, update the BookmarkList component to include a delete button for each bookmark. Add a new prop, onDeleteBookmark, which will receive the index of the bookmark to be deleted. Here’s the updated BookmarkList.js:

function BookmarkList({ bookmarks, onDeleteBookmark }) {
  return (
    <ul style={{ listStyleType: 'none', padding: 0 }}>
      {bookmarks.map((bookmark, index) => (
        <li key={index} style={{ marginBottom: '5px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <a href={bookmark.url} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', color: '#0070f3', display: 'block', padding: '10px', border: '1px solid #eee', borderRadius: '4px', flexGrow: 1, marginRight: '10px' }}>
            {bookmark.title}
          </a>
          <button onClick={() => onDeleteBookmark(index)} style={{ backgroundColor: '#f44336', color: 'white', padding: '8px 12px', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>Delete</button>
        </li>
      ))}
    </ul>
  );
}

export default BookmarkList;

Now, update pages/index.js to handle the delete functionality. Add a new function called handleDeleteBookmark and pass it to the BookmarkList component:

import { useState, useEffect } from 'react';
import BookmarkForm from '../components/BookmarkForm';
import BookmarkList from '../components/BookmarkList';

function Home() {
  const [bookmarks, setBookmarks] = useState([]);

  useEffect(() => {
    if (typeof window !== 'undefined') {
      const storedBookmarks = localStorage.getItem('bookmarks');
      if (storedBookmarks) {
        setBookmarks(JSON.parse(storedBookmarks));
      }
    }
  }, []);

  useEffect(() => {
    if (typeof window !== 'undefined') {
      localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
    }
  }, [bookmarks]);

  const handleAddBookmark = (newBookmark) => {
    setBookmarks([...bookmarks, newBookmark]);
  };

  const handleDeleteBookmark = (index) => {
    const newBookmarks = [...bookmarks];
    newBookmarks.splice(index, 1);
    setBookmarks(newBookmarks);
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <h2 style={{ marginBottom: '20px' }}>My Bookmarks</h2>
      <BookmarkForm onAddBookmark={handleAddBookmark} />
      <BookmarkList bookmarks={bookmarks} onDeleteBookmark={handleDeleteBookmark} />
    </div>
  );
}

export default Home;

Explanation:

  • handleDeleteBookmark Function: This function takes the index of the bookmark to delete as an argument. It creates a copy of the bookmarks array, uses the splice method to remove the bookmark at the specified index, and then updates the bookmarks state with the modified array.
  • Passing onDeleteBookmark Prop: The handleDeleteBookmark function is passed as a prop to the BookmarkList component.

With these changes, you’ll be able to delete bookmarks from the list. Remember that the bookmarks will also be automatically saved to and loaded from local storage.

Advanced Features (Optional)

Once you’ve mastered the basics, you can expand your bookmarking app with more advanced features:

  • Categories/Tags: Allow users to categorize their bookmarks for better organization. You’ll need to modify your data structure to include categories or tags.
  • Search Functionality: Implement a search bar to allow users to quickly find bookmarks by title or URL.
  • Sorting: Add options to sort bookmarks by title, date added, or other criteria.
  • API Integration: Instead of local storage, store bookmarks in a database using an API. This allows for data persistence across devices and user accounts. You could use a service like Firebase, Supabase, or build your own API using Node.js and a database like MongoDB or PostgreSQL.
  • User Authentication: Implement user authentication so that multiple users can use the application and have their own separate bookmark lists.
  • Dark Mode: Add a toggle for dark mode for a better user experience.
  • Import/Export Bookmarks: Allow users to import and export their bookmarks in a common format like JSON or CSV.

Common Mistakes and How to Fix Them

When building a Next.js bookmarking app, beginners often encounter these common mistakes:

  • Incorrect Pathing: Make sure your file paths are correct when importing components. Double-check your import statements.
  • State Management Issues: Incorrectly updating state can lead to unexpected behavior. Always use the correct methods to update state (e.g., using the spread operator ... for arrays and objects).
  • Local Storage Issues: Remember that local storage is only available in the browser. Wrap any code that interacts with localStorage within a conditional check (typeof window !== 'undefined') to prevent errors during server-side rendering.
  • Missing Dependencies: Make sure you install all necessary dependencies using npm install or yarn install.
  • Incorrect Event Handling: Make sure to prevent the default form submission behavior using e.preventDefault() in your handleSubmit functions.

By understanding these common pitfalls, you can avoid frustrating debugging sessions and build your app more efficiently.

Key Takeaways

  • Next.js is a great choice for building web applications, including bookmarking apps, due to its server-side rendering, routing, and React ecosystem integration.
  • Breaking down your application into smaller, reusable components makes your code more organized and maintainable.
  • Understanding state management and how to use hooks like useState and useEffect is crucial for building interactive applications.
  • Local storage provides a simple way to persist data in the browser.
  • Error handling and user experience considerations are essential for creating a user-friendly application.

Summary

You’ve now built a functional bookmarking app using Next.js! You’ve learned how to create components, manage state, handle user input, and store data in local storage. Remember to practice these concepts and experiment with different features to enhance your skills. Building this app is a solid foundation for your Next.js journey. Keep exploring the framework’s capabilities, and don’t be afraid to try new things. The more you code, the more comfortable you’ll become, and the more complex and impressive applications you’ll be able to create.

More posts