Build a Simple Next.js Interactive Markdown Previewer App

Written by

FixTechToday

in

In the world of web development, the ability to display and edit Markdown documents in real-time is a valuable skill. Whether you’re a writer, developer, or student, having a tool that instantly renders Markdown can significantly boost your productivity and understanding of how Markdown works. This article will guide you, step-by-step, through building a simple, yet functional, interactive Markdown previewer application using Next.js. We’ll cover everything from setting up your project to handling user input and displaying the formatted output. This project is ideal for those looking to solidify their understanding of Next.js, React, and Markdown parsing, providing a practical and engaging learning experience.

Why Build a Markdown Previewer?

Markdown is a lightweight markup language that allows you to format text using simple syntax. It’s widely used for writing documentation, creating README files, and crafting content for blogs and websites. A Markdown previewer lets you see how your Markdown text will look when rendered as HTML, helping you to catch errors, experiment with formatting, and ensure your content is presented as intended. Building this app will not only give you a useful tool but also teach you key web development concepts like state management, event handling, and utilizing third-party libraries.

Prerequisites

Before we dive in, make sure you have the following:

  • A basic understanding of HTML, CSS, and JavaScript.
  • Node.js and npm (or yarn) installed on your system.
  • A code editor (like VS Code, Sublime Text, or Atom).

Setting Up Your Next.js Project

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

npx create-next-app markdown-previewer
cd markdown-previewer

This command creates a new Next.js project named “markdown-previewer” and navigates you into the project directory. Next.js offers a great developer experience, including automatic code splitting, server-side rendering, and easy routing, making it an excellent choice for this project.

Installing Dependencies

Next, we need to install a library to parse Markdown into HTML. We’ll use the “marked” library for this purpose. Run the following command in your terminal:

npm install marked

The “marked” library is a fast and feature-rich Markdown parser that’s easy to integrate into your React components. Now that we have the necessary dependencies installed, we can start building our application.

Creating the Markdown Previewer Component

Let’s create a new component to house our Markdown previewer. Inside the “pages” directory, create a file named “index.js” (or modify the existing one). This will be our main page and the component for the previewer. Replace the content of “index.js” with the following code:

import { useState } from 'react';
import { marked } from 'marked';

export default function Home() {
  const [markdown, setMarkdown] = useState('');

  const handleInputChange = (e) => {
    setMarkdown(e.target.value);
  };

  const html = marked.parse(markdown);

  return (
    <div className="container">
      <div className="input-container">
        <textarea
          className="input"
          onChange={handleInputChange}
          value={markdown}
          placeholder="Enter Markdown here..."
        />
      </div>
      <div className="preview-container">
        <div className="preview" dangerouslySetInnerHTML={{ __html: html }} />
      </div>
      <style jsx>{`
        .container {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 20px;
          font-family: sans-serif;
        }

        .input-container {
          width: 80%;
          margin-bottom: 20px;
        }

        .input {
          width: 100%;
          height: 300px;
          padding: 10px;
          font-size: 16px;
          border: 1px solid #ccc;
          resize: vertical;
        }

        .preview-container {
          width: 80%;
        }

        .preview {
          border: 1px solid #ccc;
          padding: 10px;
          min-height: 200px;
          font-size: 14px;
          line-height: 1.6;
        }
      `}</style>
    </div>
  );
}

Let’s break down this code:

  • We import the `useState` hook from React to manage the state of the Markdown text.
  • We import the `marked` library to parse Markdown.
  • We initialize a state variable `markdown` with an empty string using `useState(”)`. This variable will hold the user’s input.
  • We define a function `handleInputChange` that updates the `markdown` state whenever the user types in the textarea.
  • We use `marked.parse(markdown)` to convert the Markdown text into HTML.
  • We render a `textarea` for the user to input Markdown and a `div` to display the rendered HTML. The `dangerouslySetInnerHTML` prop is used to inject the HTML generated by `marked` into the `div`.
  • We’ve included basic CSS within a `style jsx` block for styling.

Running Your Application

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

npm run dev

This command starts the Next.js development server. Open your web browser and navigate to `http://localhost:3000`. You should see a text area where you can enter Markdown and a preview area that displays the rendered HTML. Try entering some Markdown to test it out!

Styling Your Markdown Previewer

The basic styling we added in the previous step gets the job done, but let’s make the previewer more visually appealing and user-friendly. Expand the `style jsx` block in your `index.js` file with more detailed CSS. Here’s an example:


        .container {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 20px;
          font-family: sans-serif;
          background-color: #f4f4f4;
        }

        .input-container {
          width: 80%;
          margin-bottom: 20px;
        }

        .input {
          width: 100%;
          height: 300px;
          padding: 10px;
          font-size: 16px;
          border: 1px solid #ccc;
          border-radius: 5px;
          resize: vertical;
          font-family: monospace;
        }

        .preview-container {
          width: 80%;
        }

        .preview {
          border: 1px solid #ccc;
          border-radius: 5px;
          padding: 10px;
          min-height: 200px;
          font-size: 14px;
          line-height: 1.6;
          background-color: #fff;
          overflow-wrap: break-word;
        }

        h1, h2, h3, h4, h5, h6 {
          font-weight: bold;
          margin-top: 1em;
          margin-bottom: 0.5em;
        }

        p {
          margin-bottom: 1em;
        }

        code {
          background-color: #eee;
          padding: 2px 4px;
          border-radius: 3px;
          font-family: monospace;
        }

        pre {
          background-color: #eee;
          padding: 10px;
          border-radius: 5px;
          overflow-x: auto;
        }

        blockquote {
          border-left: 5px solid #ccc;
          padding-left: 10px;
          margin: 1em 0;
          font-style: italic;
        }

        a {
          color: blue;
          text-decoration: none;
        }

        a:hover {
          text-decoration: underline;
        }

        img {
          max-width: 100%;
          height: auto;
        }

This CSS provides a more refined look, including:

  • Background colors to distinguish the input and preview areas.
  • Rounded corners for a modern feel.
  • Font adjustments for better readability.
  • Styling for headings (h1-h6), paragraphs (p), code snippets (code), code blocks (pre), blockquotes, links (a), and images (img).

Feel free to customize the CSS to match your preferences and style. Experiment with different colors, fonts, and layouts to make the previewer truly your own.

Handling Common Mistakes

As you build and use your Markdown previewer, you might encounter some common issues. Here’s how to address them:

1. Markdown Not Rendering

If your Markdown isn’t rendering, double-check these things:

  • Import and Initialization: Make sure you’ve correctly imported and initialized the `marked` library.
  • State Management: Ensure the `markdown` state is being updated correctly using `setMarkdown` in your `handleInputChange` function.
  • HTML Injection: Verify that you’re using `dangerouslySetInnerHTML={{ __html: html }}` to render the HTML. This is necessary because the HTML is dynamically generated.

2. Styling Issues

If your styling isn’t working as expected:

  • CSS Scope: Remember that the styles defined within the `style jsx` block are scoped to the component. Ensure your CSS selectors are targeting the correct elements.
  • Specificity: If your styles aren’t overriding the default styles, check the specificity of your CSS selectors. More specific selectors (e.g., using classes) will take precedence.
  • Browser Caching: Sometimes, your browser might cache old CSS. Try clearing your browser’s cache or hard-refreshing the page (Ctrl+Shift+R or Cmd+Shift+R) to see if the changes are reflected.

3. Security Concerns with `dangerouslySetInnerHTML`

Using `dangerouslySetInnerHTML` can introduce security vulnerabilities if you’re not careful. Here’s how to mitigate risks:

  • Sanitize Input: The Markdown parser itself (like `marked`) usually handles basic sanitization. However, if you’re allowing users to input raw HTML, you should consider using a library like `dompurify` to sanitize the HTML before rendering it to prevent cross-site scripting (XSS) attacks.
  • Trust the Source: Only use this approach if you trust the source of the Markdown. If the input comes from an untrusted source, the risk of XSS attacks increases.

Enhancements and Next Steps

Your Markdown previewer is functional, but there are many ways to enhance it. Consider these features:

  • Toolbar: Add a toolbar with buttons for common Markdown formatting options (bold, italic, headings, links, etc.).
  • Live Preview: Implement a live preview feature that updates the rendered output as the user types, without waiting for a change event. You can achieve this by using the `onChange` event on the textarea and immediately updating the state and re-rendering.
  • Syntax Highlighting: Integrate a syntax highlighting library (like Prism.js or highlight.js) to color-code code blocks within the preview.
  • File Upload: Allow users to upload Markdown files and preview their content.
  • Customization Options: Provide options for users to customize the preview’s appearance (e.g., font size, theme).
  • Error Handling: Implement error handling to display informative messages if the Markdown parsing fails or if there are any issues with the input.
  • Dark Mode: Add a toggle for dark mode to improve readability in different environments.

Each of these additions will give you valuable experience with more advanced React concepts and further enhance your understanding of web development best practices.

Key Takeaways

This project has covered the basics of building a Markdown previewer with Next.js. You’ve learned how to:

  • Set up a Next.js project.
  • Install and use the `marked` library to parse Markdown.
  • Manage state with React’s `useState` hook.
  • Handle user input using event handlers.
  • Render HTML dynamically using `dangerouslySetInnerHTML`.
  • Apply styling using `style jsx`.

By building this application, you’ve gained practical experience with essential web development concepts and created a useful tool that you can use for your own projects. This is a solid foundation for more complex web applications using Next.js and React.

Optional: FAQ

Q1: Why use Next.js for this project?

Next.js simplifies web development by providing features like server-side rendering, automatic code splitting, and easy routing. These features improve performance, SEO, and the overall developer experience, making it an excellent choice for this project.

Q2: What is Markdown?

Markdown is a lightweight markup language that allows you to format text using a simple syntax. It’s designed to be easy to read and write, and it’s widely used for creating documentation, writing blog posts, and more.

Q3: What are the benefits of using a Markdown previewer?

A Markdown previewer allows you to see how your Markdown text will look when rendered as HTML. This helps you catch errors, experiment with formatting, and ensure your content is presented as intended. It’s a valuable tool for anyone who works with Markdown.

Q4: Can I use a different Markdown parsing library?

Yes, you can use other Markdown parsing libraries like `markdown-it`. The steps would be similar, but you’d need to adjust the import statements and parsing logic to fit the library you choose.

Q5: How can I deploy this application?

You can deploy your Next.js application to platforms like Vercel, Netlify, or AWS. Vercel is particularly well-suited for Next.js applications, offering easy deployment and automatic builds.

The journey of building a Markdown previewer with Next.js provides a tangible way to grasp fundamental web development principles. From understanding state management to manipulating user inputs and rendering dynamic content, each step enriches your comprehension of React and Next.js. As you continue to explore and expand this project, you’ll unlock further insights into crafting robust and interactive web applications, solidifying your skills and paving the way for more complex projects.

More posts