Next.js Setup

Getting Started with Next.js

Install Feediom Packages

npm install @feediom/nextjs @feediom/react

Setup the Router

The user is authed on your own server, and prevent the API key being exposed to the client

app/api/feediom/route.ts
import { createNextRouteHandler } from '@feediom/nextjs'
 
const getSession = async (req: Request) => {
  return {
    name: 'Fake User',
    email: 'example@gmail.com',
    image: null
  }
}
 
export const { POST } = createNextRouteHandler({
  auth: async (req) => {
    const user = await getSession(req)
    if (!user) throw new Error('Unauthorized')  // not allowed to submit feedback without login
    // if (!user) return null  // allowed to submit feedback without login, the user will be displayed as "Anonymous" in the dashboard
    return {
      // all fields are optional
      name: user.name || null,
      email: user.email || null,
      image: user.image || null,
    }
  }
})
ℹ️

Make sure this endpoint is available on /api/feediom

Create the Feedback Button

'use client'
 
import { FeediomButton } from '@feediom/react'
import '@feediom/react/style.css'
 
const Home = () => {
  return (
    <>
      <FeediomButton />
    </>
  )
}
 
export default Home

Result