Build a Next.js Interactive Web-Based Simple URL Shortener

Written by

javascriptdebugged

in

In today’s digital landscape, we’re constantly sharing links. Whether it’s a long, unwieldy URL to a product page, a complex article address, or a referral link, these strings of characters can be unsightly and difficult to manage. This is where URL shorteners come in, transforming those lengthy addresses into concise, shareable links. This tutorial will guide you through building a simple, yet functional, URL shortener using Next.js, a powerful React framework, enabling you to learn and apply modern web development techniques.

Why Build a URL Shortener?

Creating a URL shortener offers several advantages. Firstly, it provides a practical opportunity to learn and practice crucial web development skills, including front-end development with React, back-end development with API routes, and database interactions. Secondly, a URL shortener is a useful tool. Shortened links are easier to share on social media platforms, fit better within character limits, and can even be used to track click-through rates, providing valuable insights into user engagement. Finally, building your own URL shortener gives you full control over your data and privacy, unlike relying on third-party services.

Prerequisites

Before we begin, ensure you have the following installed and set up:

  • Node.js and npm (or yarn): These are essential for managing project dependencies and running the development server.
  • A code editor: Visual Studio Code, Sublime Text, or any editor you prefer.
  • Basic understanding of JavaScript and React: Familiarity with JavaScript syntax, React components, and state management will be helpful.

Setting Up Your Next.js Project

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

npx create-next-app url-shortener
cd url-shortener

This command creates a new Next.js project named “url-shortener” and navigates you into the project directory. You’ll be prompted to answer a few questions during setup; you can generally accept the defaults.

Project Structure Overview

Next.js projects have a specific directory structure. Understanding this structure is key to navigating and organizing your code:

  • pages: This directory contains your application’s routes. Each file inside `pages` becomes a route, for example, `pages/index.js` becomes the root route (`/`).
  • components: This directory is where you’ll store reusable React components.
  • public: This directory holds static assets like images, fonts, and other files that are served directly.
  • styles: This directory is for your CSS or styling files.
  • package.json: This file lists your project’s dependencies and scripts.

Designing the User Interface (UI)

Our URL shortener’s UI will be simple and intuitive. We’ll need an input field for the long URL, a button to shorten it, and a display area for the shortened URL. Let’s create a basic React component for this.

Create a file named components/ShortenerForm.js and add the following code:

import { useState } from 'react';

function ShortenerForm() {
  const [longUrl, setLongUrl] = useState('');
  const [shortUrl, setShortUrl] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError(''); // Clear any previous errors
    setIsLoading(true);

    try {
      const response = await fetch('/api/shorten', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ longUrl }),
      });

      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.message || 'Failed to shorten URL');
      }

      const data = await response.json();
      setShortUrl(data.shortUrl);
      setLongUrl(''); // Clear the input after success
    } catch (err) {
      setError(err.message);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col items-center gap-4 p-6 border rounded-lg shadow-md bg-white">
      <h2 className="text-2xl font-semibold mb-4">URL Shortener</h2>
      <input
        type="url"
        placeholder="Enter long URL"
        value={longUrl}
        onChange={(e) => setLongUrl(e.target.value)}
        className="w-full p-2 border rounded-md"
        required
      />
      <button
        type="submit"
        disabled={isLoading}
        className={`px-4 py-2 rounded-md ${isLoading ? 'bg-gray-400' : 'bg-blue-500 hover:bg-blue-700'} text-white transition duration-200`}
      >
        {isLoading ? 'Shortening...' : 'Shorten'}
      </button>
      {error && <p className="text-red-500">{error}</p>}
      {shortUrl && (
        <div className="p-2 border rounded-md bg-gray-100 w-full text-center"
        >
          Shortened URL: <a href={shortUrl} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline"
          >{shortUrl}</a>
        </div>
      )}
    </form>
  );
}

export default ShortenerForm;

This component uses React’s useState hook to manage the input URL (longUrl), the shortened URL (shortUrl), a loading state (isLoading), and any potential errors (error). The handleSubmit function will be responsible for sending the long URL to our API endpoint to be shortened.

Integrating the UI into the Main Page

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

import ShortenerForm from '../components/ShortenerForm';

export default function Home() {
  return (
    <div className="container mx-auto py-8 flex items-center justify-center min-h-screen bg-gray-100"
    >
      <ShortenerForm />
    </div>
  );
}

This imports our ShortenerForm component and renders it on the page. We’ve also added some basic styling using Tailwind CSS to center the form and give it a pleasant background.

Building the API Endpoint (Backend)

Next.js allows us to create API routes within the pages/api directory. These routes handle the back-end logic of our application. Let’s create an API endpoint to handle the URL shortening process.

Create a file named pages/api/shorten.js and add the following code:

import { nanoid } from 'nanoid';

const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';

async function handler(req, res) {
  if (req.method === 'POST') {
    const { longUrl } = req.body;

    if (!longUrl) {
      return res.status(400).json({ message: 'URL is required' });
    }

    try {
      const shortCode = nanoid(6); // Generate a unique short code

      // In a real application, you'd save this mapping to a database.
      // For this example, we'll store it in memory.
      const urlMap = {
        [shortCode]: longUrl,
      };

      // Simulate saving to a database (in a real app, use a database like MongoDB or PostgreSQL)
      // In this example, we're just storing it in memory for the duration of the server's runtime.
      global.urlMap = global.urlMap || {};
      global.urlMap[shortCode] = longUrl;

      const shortUrl = `${BASE_URL}/${shortCode}`;

      res.status(200).json({ shortUrl });
    } catch (error) {
      console.error('Error shortening URL:', error);
      res.status(500).json({ message: 'Failed to shorten URL' });
    }
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

export default handler;

This API route does the following:

  • It checks if the request method is POST.
  • It extracts the longUrl from the request body.
  • It generates a unique short code using the nanoid library. You’ll need to install this: npm install nanoid
  • It simulates saving the long URL and short code to a database (in a real application, you’d use a database like MongoDB, PostgreSQL, or similar). For this example, we are using an in-memory storage to keep the example simple.
  • It constructs the shortened URL.
  • It returns the shortened URL in the response.

Handling URL Redirection

Now, we need to handle the redirection when a user visits the shortened URL. Create a file named pages/[shortCode].js and add the following code:

import { useEffect } from 'react';
import { useRouter } from 'next/router';

export async function getServerSideProps(context) {
  const { shortCode } = context.query;

  // Access the in-memory URL map
  const urlMap = global.urlMap || {};
  const longUrl = urlMap[shortCode];

  if (!longUrl) {
    return {
      notFound: true,
    };
  }

  return {
    props: { longUrl },
  };
}

function RedirectPage({ longUrl }) {
  const router = useRouter();

  useEffect(() => {
    if (longUrl) {
      router.replace(longUrl);
    }
  }, [longUrl, router]);

  return <p>Redirecting...</p>;
}

export default RedirectPage;

This file does the following:

  • It uses getServerSideProps to fetch the long URL associated with the short code from our in-memory storage.
  • If the short code is not found, it returns a 404 error.
  • It redirects the user to the long URL using the router.replace() method.

Running and Testing Your Application

To run your application, execute the following command in your terminal:

npm run dev

This starts the Next.js development server. Open your browser and go to http://localhost:3000. Enter a long URL into the input field and click “Shorten.” You should see a shortened URL generated. When you click on the shortened URL, you should be redirected to the original long URL.

Styling with Tailwind CSS

The provided code uses Tailwind CSS for styling. Tailwind CSS is a utility-first CSS framework that allows you to style your components directly in your HTML using class names. Here’s a breakdown of some of the Tailwind classes used:

  • flex, flex-col, items-center, justify-center: These classes control the layout and alignment of elements.
  • gap-4: Adds a gap of 1rem (4 * 0.25rem) between elements.
  • p-6, p-2: Adds padding to elements.
  • border, rounded-md: Adds a border and rounded corners.
  • shadow-md: Adds a medium-sized shadow.
  • bg-white, bg-gray-100, bg-blue-500, bg-blue-700, bg-gray-400: Sets the background color.
  • text-2xl, text-white, text-red-500, text-blue-600: Sets the text size and color.
  • font-semibold: Sets the font weight to semi-bold.
  • hover:bg-blue-700, hover:underline: Applies styles on hover.
  • transition duration-200: Adds a smooth transition effect.
  • w-full: Sets the width to 100%.

To customize the appearance further, you can modify these classes or add your own custom styles using Tailwind’s configuration file (tailwind.config.js).

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect API Endpoint URL: Double-check the URL you’re using to call your API endpoint (e.g., in the fetch call in ShortenerForm.js). Ensure it matches the route you defined in pages/api/shorten.js.
  • CORS Errors: If you’re getting CORS (Cross-Origin Resource Sharing) errors, it means your front-end is trying to access your API from a different origin (domain, protocol, or port) than where your API is served. For development, you can often bypass this by setting up a proxy in your next.config.js file. For production, you’ll need to configure your server to allow requests from your front-end’s origin.
  • Missing Dependencies: Make sure you’ve installed all the necessary dependencies (e.g., nanoid) using npm or yarn.
  • Typos: Carefully review your code for any typos, especially in variable names, file paths, and component names.
  • Server-Side Errors: Check the console in your terminal (where you ran npm run dev) for any server-side errors that might be occurring in your API route.
  • Database Connection Issues (Real Application): If you’re using a database in a real application, ensure your database connection details (host, username, password, database name) are correct and that your server has access to the database.

Key Takeaways

  • Next.js API Routes: Next.js’s API routes provide a simple and elegant way to build back-end functionality within your front-end application.
  • Server-Side Rendering (SSR) with getServerSideProps: The getServerSideProps function is crucial for fetching data on the server-side, enabling SEO and improved performance.
  • State Management with useState: React’s useState hook simplifies state management in your components.
  • Form Handling: Handling form submissions involves using the onSubmit event, sending data to the server, and managing loading and error states.
  • URL Redirection: Redirecting users to another URL is a fundamental web development task, and Next.js makes it easy with the router.replace() method.
  • Importance of Error Handling: Implementing proper error handling (e.g., displaying error messages to the user) improves the user experience.

Enhancements and Next Steps

This tutorial provides a solid foundation for building a URL shortener. Here are some ideas for further enhancements:

  • Database Integration: Integrate a real database (like MongoDB, PostgreSQL, or MySQL) to store the long URL and short code mappings persistently.
  • User Authentication: Implement user authentication so users can create accounts and manage their shortened links.
  • Analytics: Add analytics to track click-through rates, referring sources, and other valuable metrics.
  • Custom Short Codes: Allow users to customize the short code they want to use.
  • QR Code Generation: Generate QR codes for the shortened URLs.
  • Rate Limiting: Implement rate limiting to prevent abuse of the service.
  • UI/UX improvements: Improve the user interface and user experience with more advanced features, such as a dashboard to manage shortened links.

By implementing these enhancements, you can transform this simple project into a more robust and feature-rich application.

Building a URL shortener is a great way to learn and practice essential web development skills. From front-end design to back-end logic, and database integration, this project provides a comprehensive hands-on experience. Remember to experiment, explore, and most importantly, have fun while building your own version of this useful tool. The skills you gain will be invaluable as you continue your journey in web development. The ability to create, deploy, and manage a service like this is a testament to your growing expertise, allowing you to not only understand the technical aspects of web development but also appreciate the practical applications of these skills in the real world.

More posts