Build a Simple Next.js Bookmarking App: A Beginner’s Guide

Written by

FixTechToday

in

In today’s digital landscape, we’re constantly bombarded with information. Finding and, more importantly, remembering the valuable resources we stumble upon can be a real challenge. This is where a bookmarking application comes to the rescue. Imagine having a centralized, easily accessible place to store all your favorite websites, articles, and resources. That’s the power of a bookmarking app. In this guide, we’ll walk through building a simple, yet functional, bookmarking application using Next.js, a powerful React framework for building web applications.

Why Next.js?

Next.js offers several advantages for this project, and web development in general:

  • Server-Side Rendering (SSR) & Static Site Generation (SSG): Next.js allows us to render pages on the server or generate static HTML at build time, leading to improved SEO and faster initial page loads.
  • Routing: Next.js simplifies routing with its file-system-based router, making it easy to create different pages for your application.
  • API Routes: Easily build API endpoints within your Next.js application, handling backend logic with ease.
  • Developer Experience: Next.js boasts a great developer experience with features like hot module replacement and built-in image optimization.

Project Setup

Let’s get started by setting up our Next.js project. Open your terminal and run the following command:

npx create-next-app bookmarking-app

This command will create a new Next.js project named “bookmarking-app”. Navigate into the project directory:

cd bookmarking-app

Now, install any dependencies we’ll be using. For this basic bookmarking app, we’ll keep it simple and won’t need any external libraries for the core functionality. However, we might use a library like `react-icons` for adding icons and enhancing the user interface. Install it with:

npm install react-icons

Project Structure

Before we dive into the code, let’s establish a basic project structure. The default Next.js project structure is a good starting point. Here’s what we’ll be working with:

  • pages/: This directory is where all your pages live. Each file in this directory becomes a route in your application. For example, `pages/index.js` will be the homepage.
  • components/: We’ll create this directory to house reusable React components, such as a bookmark item or a form for adding new bookmarks.
  • styles/: This is where your CSS or styling files will reside.

Building the Bookmark Component

Let’s start by creating a component to represent a single bookmark. Create a file named `Bookmark.js` inside the `components` directory. This component will display the bookmark’s title, URL, and potentially an icon or description. Here’s the code:

import React from 'react';

function Bookmark({ title, url }) {
  return (
    <div className="bookmark-item">
      <a href={url} target="_blank" rel="noopener noreferrer">
        <h3>{title}</h3>
        <p>{url}</p>
      </a>
    </div>
  );
}

export default Bookmark;

In this component, we accept `title` and `url` as props and render a link to the bookmark’s URL. We’ve also added `target=”_blank” rel=”noopener noreferrer”` to the `<a>` tag. This opens the link in a new tab, and `rel=”noopener noreferrer”` is a security measure to prevent the new tab from accessing the original tab’s `window` object.

Now, let’s create a basic stylesheet for our bookmark items. Create a file named `Bookmark.module.css` (or you can use a global CSS file, but module CSS is generally preferred for component-specific styling) inside the `components` directory. Add some basic styling:

.bookmark-item {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.bookmark-item a {
  text-decoration: none;
  color: #333;
}

.bookmark-item h3 {
  margin-bottom: 5px;
}

Import the stylesheet into your `Bookmark.js` component:

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

function Bookmark({ title, url }) {
  return (
    <div className={styles.bookmarkItem}>
      <a href={url} target="_blank" rel="noopener noreferrer">
        <h3>{title}</h3>
        <p>{url}</p>
      </a>
    </div>
  );
}

export default Bookmark;

Creating the Bookmark List

Next, let’s create a component to display a list of bookmarks. Create a file named `BookmarkList.js` inside the `components` directory:

import React from 'react';
import Bookmark from './Bookmark';

function BookmarkList({ bookmarks }) {
  return (
    <div>
      {bookmarks.map((bookmark) => (
        <Bookmark key={bookmark.id} title={bookmark.title} url={bookmark.url} />
      ))}
    </div>
  );
}

export default BookmarkList;

This component takes an array of `bookmarks` as a prop and renders a `Bookmark` component for each bookmark in the array. We’re also using the `key` prop, which is crucial for React to efficiently update the list when bookmarks are added or removed. It’s best practice to use a unique identifier (like an `id`) for the `key`.

Building the Add Bookmark Form

Now, let’s create a form to add new bookmarks. Create a file named `AddBookmarkForm.js` inside the `components` directory:

import React, { useState } from 'react';

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

  const handleSubmit = (e) => {
    e.preventDefault();
    if (title.trim() === '' || url.trim() === '') {
      alert('Please enter both title and URL.');
      return;
    }
    onAddBookmark({ title, url, id: Date.now() }); // Generate a simple ID
    setTitle('');
    setUrl('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="title">Title:</label>
      <input
        type="text"
        id="title"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        required
      />
      <br />
      <label htmlFor="url">URL:</label>
      <input
        type="url"
        id="url"
        value={url}
        onChange={(e) => setUrl(e.target.value)}
        required
      />
      <br />
      <button type="submit">Add Bookmark</button>
    </form>
  );
}

export default AddBookmarkForm;

This component uses the `useState` hook to manage the form’s input values. The `handleSubmit` function is called when the form is submitted. It prevents the default form submission behavior (which would refresh the page), validates the input, calls the `onAddBookmark` function (which we’ll define in the parent component), and resets the form fields.

Putting it all together in the Homepage

Now, let’s put these components together in the `pages/index.js` file, which is the homepage of our application. Replace the default content with the following:

import React, { useState } from 'react';
import BookmarkList from '../components/BookmarkList';
import AddBookmarkForm from '../components/AddBookmarkForm';

function Home() {
  const [bookmarks, setBookmarks] = useState([
    { id: 1, title: 'Google', url: 'https://www.google.com' },
    { id: 2, title: 'Next.js Documentation', url: 'https://nextjs.org/docs' },
  ]);

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

  return (
    <div>
      <h1>My Bookmarks</h1>
      <AddBookmarkForm onAddBookmark={handleAddBookmark} />
      <BookmarkList bookmarks={bookmarks} />
    </div>
  );
}

export default Home;

In this component, we:

  • Import the `BookmarkList` and `AddBookmarkForm` components.
  • Use the `useState` hook to manage the `bookmarks` state. We initialize it with some sample bookmarks.
  • Define the `handleAddBookmark` function, which adds a new bookmark to the `bookmarks` array.
  • Render the `AddBookmarkForm` component, passing the `handleAddBookmark` function as a prop.
  • Render the `BookmarkList` component, passing the `bookmarks` array as a prop.

Running the Application

To run the application, open your terminal, navigate to your project directory (if you’re not already there), and run the following command:

npm run dev

This will start the development server. Open your web browser and go to `http://localhost:3000`. You should see your bookmarking application running. You can add new bookmarks using the form and they will appear in the list. You can click the bookmark titles to open the corresponding websites in new tabs.

Adding More Features (Optional)

This is a basic bookmarking application. You can extend it with several features:

  • Local Storage: Persist bookmarks in the browser’s local storage so that they are saved even when the user closes the browser or refreshes the page.
  • Bookmark Editing and Deletion: Add functionality to edit and delete bookmarks.
  • Categorization: Allow users to categorize bookmarks with tags or folders.
  • Search: Implement a search feature to easily find bookmarks.
  • User Authentication: For a more advanced application, you could implement user accounts and allow users to save their bookmarks to a database.
  • Styling: Improve the application’s appearance with more advanced CSS or a UI library like Material UI or Chakra UI.
  • API Integration: Integrate with a bookmarking API to sync your bookmarks across devices.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when building Next.js applications and how to avoid or fix them:

  • Incorrect File Paths: Double-check your file paths when importing components and modules. Typos or incorrect paths are a common source of errors.
  • Missing or Incorrect `key` Prop: When rendering lists of items (like our bookmarks), always provide a unique `key` prop to each item. This helps React efficiently update the list. If you don’t provide a key, React will throw a warning. If the key is not unique, the component may not update correctly.
  • Not Handling Form Submissions Correctly: When working with forms, make sure to prevent the default form submission behavior (using `e.preventDefault()`) to avoid page reloads. Also, validate the form input before processing it.
  • Ignoring Error Messages: Pay close attention to the error messages in your browser’s console. They often provide valuable clues about what’s going wrong.
  • Not Using CSS Modules (or similar): Using CSS Modules or a similar approach helps avoid style conflicts between components. Without it, your styles could inadvertently affect other parts of your application.
  • Forgetting to Install Dependencies: Always install dependencies with `npm install` or `yarn install` before running the application.

Key Takeaways

  • Next.js is a great choice for building web applications due to its performance and developer-friendly features.
  • Understanding components, props, and state is fundamental to building React applications.
  • The `pages` directory is where you define your application’s routes.
  • CSS Modules help keep your styles organized and prevent conflicts.
  • Always provide a unique `key` prop when rendering lists.

FAQ

Q: How do I deploy this application?

A: Next.js applications are often deployed on platforms like Vercel (which is recommended, as it’s built by the creators of Next.js) or Netlify. You can also deploy to other platforms like AWS or Google Cloud. The deployment process typically involves pushing your code to a repository and configuring the platform to build and deploy your application.

Q: How can I add icons to my bookmarks?

A: You can use a library like `react-icons` to easily add icons. Install it with `npm install react-icons`. Then, import the icon you want and use it in your `Bookmark` component. For example:

import { FaExternalLinkAlt } from 'react-icons/fa'; // Example icon

function Bookmark({ title, url }) {
  return (
    <div className="bookmark-item">
      <a href={url} target="_blank" rel="noopener noreferrer">
        <FaExternalLinkAlt />  <!-- Add the icon here -->
        <h3>{title}</h3>
        <p>{url}</p>
      </a>
    </div>
  );
}

Q: How can I store the bookmarks in local storage?

A: You can use the `useEffect` hook to read from and write to local storage. Here’s a basic example:

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

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

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

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

  // ... rest of your component
}

Q: How do I handle bookmark deletion?

A: You can add a delete button to your `Bookmark` component and pass a function to handle the deletion. This function would filter the `bookmarks` array in the parent component (e.g., `Home`) to remove the bookmark with the corresponding ID. Then, update the `bookmarks` state using the `setBookmarks` function.

Q: What are the benefits of using Server-Side Rendering (SSR) in Next.js?

A: SSR in Next.js offers several advantages, including improved SEO (search engines can easily crawl and index your content), faster initial page loads (as the server renders the HTML), and better social media sharing (as the server provides the necessary metadata).

Building a bookmarking application with Next.js is a fantastic way to learn the fundamentals of web development and Next.js. This project gives you a solid foundation for more complex applications. With the knowledge you’ve gained from this guide, you’re well-equipped to start building your own bookmarking app and explore the exciting world of web development. As you expand the application with new features, you will gain valuable experience and become more proficient in Next.js and React. The journey of learning never truly ends, and each project you undertake will contribute to your growing skill set.

More posts