NextJs 13 and Server Side Components
See original GitHub issueWith NextJS 13 being released the standard way of tracking with the client no longer works. This is due to the setup requiring the useEffect
hook which is now exclusively used in client components which don’t have access to next/router
anymore.
'use client'
import { load, trackPageview } from 'fathom-client'
import { useRouter } from 'next/router' // this cannot be found
import { useEffect } from 'react'
export default function Fathom() {
const { events } = useRouter()
useEffect(() => {
// Initialize Fathom when the app loads
// Example: yourdomain.com
// - Do not include https://
// - This must be an exact match of your domain.
// - If you're using www. for your domain, make sure you include that here.
load('KEY', {
includedDomains: ['DOMAIN'],
url: 'CUSTOM_URL',
spa: 'auto',
})
function onRouteChangeComplete(): void {
trackPageview()
}
// Record a pageview when route changes
events.on('routeChangeComplete', onRouteChangeComplete)
// Unassign event listener
return (): void => {
events.off('routeChangeComplete', onRouteChangeComplete)
}
}, [events])
return null
}
Next is using next/navigation
to provide the useRouter
hook now which does not expose an event
object.
Has anybody has success using server components?
Issue Analytics
- State:
- Created a year ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
React 18: React Server Components | Next.js
React Server Components allow developers to build applications that span the server and client, combining the rich interactivity of client-side apps with ...
Read more >Fun With Next.js 13 Server Components - DEV Community
js 13. The goal of server component is to reduce the size of JS shipped to the client by keeping component code only...
Read more >What and Why: React Server Components in Next.js 13
Components built with the new Next.js 13 app folder-based architecture will be React Server Components by default. The new architecture is still ...
Read more >Next.js 13 support (server-side components) #3707 - GitHub
CSS-in-JS is currently not supported in Server Components. Using CSS-in-JS with newer React features like Server Components and Streaming ...
Read more >What's New in Next.js 13? All you need to Know! - SoluteLabs
1. App/Directory for File-Based Routing: File-based routing is one of Next.js's best features. · 2. React Server Components: Next.js 13's ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I’m thinking a middleware solution might be the goto. I shall be investigating 👀
Nice, thanks!