How To Create A Typewriter Effect In Next.js

Introduction

Adding dynamic text animations to your website can make your content more engaging and interactive. One popular animation is the typewriter effect, where text is revealed one character at a time, mimicking the experience of typing on an old typewriter. In this blog post, we'll learn how to implement the typewriter effect in a Next.js application using the typewriter-effect npm package.

By the end of this tutorial, you'll be able to add a smooth, animated typing effect to any part of your Next.js project with ease!

Prerequisites

Before we get started, make sure you have the following prerequisites:

• Basic knowledge of React and Next.js.
• A Next.js application set up and running.
• Node.js and npm installed on your machine.

Step 1: Install typewriter-effect npm Package

The first step is to install the typewriter-effect package. It’s a lightweight library that makes adding typewriter-style animations to your website a breeze.

To install it, run the following command in your Next.js project:

npm install typewriter-effect

Step 2: Import typewriter-effect in Your Component

Once the package is installed, you can import it into any component where you want to use the typewriter effect. For this example, let's use the effect in the pages/index.js file.

Here’s how to import and use it:

// pages/index.js
import React from 'react';
import Typewriter from 'typewriter-effect';

const HomePage = () => {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
      <h1>
        <Typewriter
          options={{
            strings: ['Welcome to my Next.js site!', 'Enjoy the Typewriter effect!', 'Built with Next.js & React'],
            autoStart: true,
            loop: true,
            deleteSpeed: 50,
            delay: 75,
          }}
        />
      </h1>
    </div>
  );
};

export default HomePage;

Explanation:

• strings: This is an array of strings that you want to animate. You can customize these with any text you like.

• autoStart: This option, when set to true, makes sure that the typewriter effect starts immediately when the page loads.

• loop: When set to true, the animation will restart from the beginning once it completes. Set it to false if you only want it to type out once.

• deleteSpeed: This controls how fast the text is deleted after being typed. Adjust this value to control the deletion speed.

• delay: This controls the delay between typing each character. You can adjust it for a faster or slower typing effect.

Check the typewriter-effect npm page for more details:

https://www.npmjs.com/package/typewriter-effect

By following these steps, you should have no trouble creating stunning typewriter effects in your Next.js app. Happy coding!