How to integrate in next.js app

In this section, we are going to tell you that how to integrate https://pushmarket.io with Next.js

follow these steps:

Install the package using npm or yarn

npm


npm install @presswink/pushmarket.io

yarn


yarn add @presswink/pushmarket.io

Import it in your app


import { PushMarket } from '@presswink/pushmarket.io'

Add the PushMarket component to your app below all tags in root file. Please replace {{your-project-id}} with your project id


<PushMarket projectId="{{your-project-id}}" />

Create a new javascript file

Create a new javascript file, called sw.js in the public folder and add the following code to it.

/public/sw.js


importScripts("https://pushmarket.io/sdk/service-worker.js")

Example:

Example

layout.tsx


import type { Metadata } from "next";
import "./globals.css";
import { PushMarket } from '@presswink/pushmarket.io'
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
      {/** below body tags */}
      <PushMarket projectId="project-id" />
    </html>
  );
}