This guide will help you integrate Marker.io into your Next.js 13 project, enabling you to collect user issues directly from your web application. Let's walk through the process step by step.
1. Preliminary Setup
Ensure Your Project is Up-to-Date
Before starting, make sure your Next.js project is updated to version 13.4 or later. You can update your project by running the following command in your terminal:
npm install next@latest
Retrieve Your Marker.io Project ID
Sign up or Log in to your Marker.io account.
Create a new project if you haven't already.
Find your Project ID:
Navigate to your project settings on Marker.io.
Go to the Widget tab and click on Installation.
Copy the Project ID from the NPM package section for later use.
2. Create the Marker.io Component
Create a Marker Component File
Create a file named
MarkerComponent.client.jsin your project directory.Paste the following code into the file, replacing
'your-project-id'with the Project ID you retrieved 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;
}
3. Integrate Marker.io with Next.js
Modify the Layout File
Open
layout.tsxin your Next.js project.Import the
MarkerComponentat the top of the 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
Include the
MarkerComponentwithin theRootLayoutcomponent, like this:
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>
)
}
4. Test the Integration
To verify that the Marker.io widget is working:
Run your Next.js application using:
npm run dev
Open your application in a web browser. You should see the Marker.io widget on your site, ready to collect user issues.
Need Help?
If you have any questions, comments, or corrections, chat with us at the bottom right of our web page.