Next js interactive timeline

by | Sep 23, 2024 | Technology

To create an interactive timeline in Next.js, you can utilize React-based libraries that offer timeline components, along with custom styling to make it interactive and responsive. Below is a step-by-step guide on how to create an interactive timeline in Next.js using React-Vertical-Timeline-Component and Tailwind CSS for styling.

Steps to Build an Interactive Timeline in Next.js:

1. Set Up a New Next.js Project

If you haven’t already, create a new Next.js project:

bash
npx create-next-app interactive-timeline
cd interactive-timeline

2. Install Dependencies

For this example, you’ll use the react-vertical-timeline-component package to handle the timeline rendering.

bash
npm install react-vertical-timeline-component tailwindcss

3. Configure Tailwind CSS

Set up Tailwind CSS to handle the styling for your project.

  • Install the necessary dependencies:
bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
  • Configure tailwind.config.js:
js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
};
  • Add Tailwind directives to the globals.css file:
css
@tailwind base;
@tailwind components;
@tailwind utilities;

4. Create the Timeline Component

Now you can create a Timeline component using react-vertical-timeline-component. This will be an interactive and customizable timeline where you can display events.

jsx
// components/Timeline.js
import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';
import { FaBriefcase, FaGraduationCap } from 'react-icons/fa';

export default function Timeline() {
return (
<div className="py-10">
<h1 className="text-3xl text-center font-bold mb-10">Interactive Timeline</h1>
<VerticalTimeline>
<VerticalTimelineElement
className="vertical-timeline-element--work"
contentStyle={{ background: '#6D28D9', color: '#fff' }}
contentArrowStyle={{ borderRight: '7px solid #6D28D9' }}
date="2021 - present"
iconStyle={{ background: '#6D28D9', color: '#fff' }}
icon={<FaBriefcase />}
>
<h3 className="vertical-timeline-element-title">Software Engineer</h3>
<h4 className="vertical-timeline-element-subtitle">ABC Corp, San Francisco</h4>
<p>Developed and maintained web applications using React and Node.js.</p>
</VerticalTimelineElement>

<VerticalTimelineElement
className="vertical-timeline-element--education"
date="2015 - 2020"
iconStyle={{ background: '#1E40AF', color: '#fff' }}
icon={<FaGraduationCap />}
>
<h3 className="vertical-timeline-element-title">Bachelor of Science in Computer Science</h3>
<h4 className="vertical-timeline-element-subtitle">University of XYZ</h4>
<p>Learned algorithms, data structures, and full-stack web development.</p>
</VerticalTimelineElement>

{/* Add more timeline elements as needed */}
</VerticalTimeline>
</div>
);
}

5. Use the Timeline Component in a Page

Now, you can use the Timeline component in one of your pages. In this case, it’s being used on the home page (index.js).

jsx
// pages/index.js
import Head from 'next/head';
import Timeline from '../components/Timeline';

export default function Home() {
return (
<div>
<Head>
<title>Interactive Timeline</title>
</Head>

<main className="container mx-auto">
<Timeline />
</main>
</div>
);
}

6. Styling with Tailwind CSS

You can enhance the appearance of your timeline by applying Tailwind classes and customizing the colors and layout. For example:

  • Customizing the timeline colors in the component above, you can adjust the contentStyle and iconStyle of VerticalTimelineElement to fit your design.
  • Responsiveness: Tailwind’s utility classes ensure that your timeline is responsive. You can add media queries or grid layouts if you want to further refine the layout for mobile.

7. Interactivity

For more interactivity:

  • OnClick Events: You can add click handlers to the timeline elements to open more details, display modals, or navigate to another page.
jsx
<VerticalTimelineElement
className="vertical-timeline-element--work"
date="2021 - present"
onClick={() => alert('More details about this job')}
iconStyle={{ background: '#6D28D9', color: '#fff' }}
icon={<FaBriefcase />}
>
{/* Content */}
</VerticalTimelineElement>
  • Animations: You can also integrate libraries like Framer Motion for animations when users scroll through the timeline or hover over elements.

8. Optional Enhancements

  • Add dynamic content: Use a CMS like Sanity or Strapi to load timeline events dynamically from a backend.
  • Add filters: Let users filter events by category (e.g., education, work).
  • Add search functionality: Implement a search box to quickly find specific events in the timeline.

Example Output

You will have an interactive vertical timeline where users can scroll and click on timeline elements for more information. The timeline will be fully responsive and styled using Tailwind CSS.

Conclusion

By using react-vertical-timeline-component and Tailwind CSS with Next.js, you can create a highly customizable and responsive interactive timeline. You can add more features like dynamic data fetching, animations, and user interaction to make the timeline even more engaging.

×
Sign in
Sign up

Sign In

Sign Up