Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

POST request is not fired when clicking on links #114

Closed
polynook opened this issue Dec 2, 2023 · 3 comments
Closed

POST request is not fired when clicking on links #114

polynook opened this issue Dec 2, 2023 · 3 comments

Comments

@polynook
Copy link

polynook commented Dec 2, 2023 •
edited
Loading

Problem

With the below setup, when using PlausibleProvider, no POST request is fired to http://localhost:8000/api/event when navigating with next/link component.

When using PlausibleProvider, the request is fired correctly under these circumstances:

  • on browser page reload
  • on browser back/forward navigation (alternate between clicking on ONE and HOME links in the example below several times to accumulate browser history — no event request will be fired, but then click on the browser navigation arrows and the requests will fire correctly).

Steps to reproduce

  1. Install blank Next.js project with default settings: https://nextjs.org/docs/getting-started/installation#automatic-installation
  2. install next-plausible.
  3. cd into the Next.js project directory and run npm run dev
  4. Clone Plausible repo and follow instructions to configure Plausible: https://plausible.io/docs/self-hosting#up-and-running
  5. cd into hosting directory and run docker-compose up. Login to Plausible instance and complete setup.
  6. Create a page route inside the Next.js app directory:

app/one/page.tsx:

export default function One(){
    return<>ONE</>
}
  1. Update app/layout.tsx to contain two next/link links, one to navigate to page ONE, and the other to
    app/layout.tsx
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
import Link from 'next/link'
import PlausibleProvider from 'next-plausible'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        {/* <script defer data-domain="localhost" src="http://localhost:8000/js/script.local.js"></script> */}
        <PlausibleProvider
            domain='localhost'
            trackLocalhost={true}
            enabled={true}
            selfHosted={true}
            customDomain='http://localhost:8000'  />
      </head>
      <body className={inter.className}>
        <nav>
          <Link href="/">HOME</Link>
          <Link href="/one">ONE</Link>
        </nav>
        <div>
          {children}
        </div>
      </body>
    </html>
  )
}
  1. Reload home page, POST request will fire, then click on "ONE" — there will be no POST event.

Client-side navigation via next/link fires event requests correctly when plausible script is added via a <script> element (uncomment it and comment out PlausibleProvider).
@polynook
Copy link
Author

polynook commented Dec 3, 2023

This appears to be an issue with next.js and is going to be fixed in 14.0.4 vercel/next.js#58861

@4lejandrito 4lejandrito mentioned this issue Dec 3, 2023
Closed
@4lejandrito
Copy link
Owner

vercel/next.js#58861 has been merged. Can you verify whether or not this still happens in `v14.0.4-canary.40?

@4lejandrito
Copy link
Owner

I can confirm it does work on canary 40.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@4lejandrito @polynook