Introduction
Collecting user feedback is crucial for improving your web application. Marker.io provides a seamless bridge between your users and your React-based Next.js project. With the advent of Next.js 13, integrating Marker.io requires a specific approach due to the introduction of client and server components. This guide will walk you through integrating Marker.io within a Next.js 13 project.
Preliminary Setup
Ensure Your Project is Up-To-Date
Update your project to Next.js 13.4 or later using the following command:
npm install next@latest
Retrieve Your Marker.io Project ID:
Sign up or log in to your Marker.io account and create a new project if you haven't already.
Once your project is set up, navigate to the settings of your project on Marker.io. Under the Widget tab, click on Installation. Here, you will find your project ID under the NPM package section. Make a note of this ID as you'll need it for the next steps.
Step 1: Create the Marker.io Component
Create MarkerComponent.client.js: Create a file named MarkerComponent.client.js in a directory of your choice. This file will hold the code to initialize the Marker.io widget.In this file, paste the following code, replacing 'your-project-id' with the project ID you noted down earlier:
'use client';
import React, { useEffect } from 'react';
import markerSDK from '@marker.io/browser';
export default function MarkerComponent() {
useEffect(() => {
markerSDK.loadWidget({
project: 'your-project-id',
});
}, []);
return null;
}
Step 2: Integrate with Next.js
Open layout.tsx and import the MarkerComponent by adding the following line at the top of your file, adjusting the path to match the location of your MarkerComponent.client.js file:
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import MarkerComponent from '../path-to-marker-component/MarkerComponent.client'
// ... rest of your code
Within the RootLayout component of layout.tsx, include the MarkerComponent so it looks like this:
// ... rest of your code
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<head>
{/* ...any other head elements you may have */}
</head>
<body className={inter.className}>
<MarkerComponent />
{children}
</body>
</html>
)
}
Step 3: Test the Integration:
Now it's time to test the integration and see if the Marker.io widget shows up in your application.
Run your Next.js application using the following command in the terminal:
npm run dev
Once your application is running, open it in your web browser and you should see the Marker.io widget appearing on your site, ready to collect feedback.
By following these detailed steps, you will be able to integrate Marker.io into your React-based Next.js 13+ project and start collecting user feedback efficiently.