Next.js

Installation

Next.js 13.2.1 or higher is required in order to use react-xeet.

Follow the installation docs in the Introduction.

Usage

In any component, import Xeet from react-xeet and use it like so:

import { Xeet } from 'react-xeet'
 
export default function Page() {
  return <Xeet id="1628832338187636740" />
}

Xeet works differently depending on where it's used. If it's used in the App Router it will fetch the xeet in the server. If it's used in the pages directory it will fetch the xeet in the client with SWR (opens in a new tab).

You can learn more about Xeet in the X theme docs. And you can learn more about the usage in Running the test app.

Troubleshooting

If you see an error saying that CSS can't be imported from node_modules in the pages directory. Add the following config to next.config.js:

transpilePackages: ['react-xeet']

The error won't happen if the App Router is enabled, where Next.js supports CSS imports from node_modules (opens in a new tab).

Advanced usage

Manual data fetching

You can use the getXeet function from react-xeet/api to fetch the xeet manually. This is useful for SSG pages and for other Next.js data fetching methods (opens in a new tab) in the pages directory.

For example, using getStaticProps in pages/[xeet].tsx to fetch the xeet and send it as props to the page component:

import { useRouter } from 'next/router'
import { getXeet, type Xeet } from 'react-xeet/api'
import { EmbeddedXeet, XeetSkeleton } from 'react-xeet'
 
export async function getStaticProps({
  params,
}: {
  params: { xeet: string }
}) {
  const xeetId = params.xeet
 
  try {
    const xeet = await getXeet(xeetId)
    return xeet ? { props: { xeet } } : { notFound: true }
  } catch (error) {
    return { notFound: true }
  }
}
 
export async function getStaticPaths() {
  return { paths: [], fallback: true }
}
 
export default function Page({ xeet }: { xeet: Xeet }) {
  const { isFallback } = useRouter()
  return isFallback ? <XeetSkeleton /> : <EmbeddedXeet xeet={xeet} />
}

Adding `next/image`

Add the domain URLs from X to images.remotePatterns (opens in a new tab) in next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'pbs.twimg.com' },
      { protocol: 'https', hostname: 'abs.twimg.com' },
    ],
  },
}

In xeet-components.tsx or elsewhere, import the Image component from next/image and use it to define custom image components for the xeet:

import Image from 'next/image'
import type { XeetComponents } from 'react-xeet'
 
export const components: XeetComponents = {
  AvatarImg: (props) => <Image {...props} />,
  MediaImg: (props) => <Image {...props} fill unoptimized />,
}

Then pass the components prop to Xeet:

import { Xeet } from 'react-xeet'
import { components } from './xeet-components'
 
export default function Page() {
  return <Xeet id="1628832338187636740" components={components} />
}

Running the test app

Clone the react-xeet (opens in a new tab) repository and then run the following command:

pnpm install && pnpm dev --filter=next-app...

The app will be up and running at http://localhost:3001 (opens in a new tab) for the Next.js app example (opens in a new tab).

The app shows the usage of react-xeet in different scenarios:

localhost:3001/light/1629307668568633344 (opens in a new tab) renders the xeet in the app router.
localhost:3001/dark/1629307668568633344 (opens in a new tab) renders the xeet using SSG in the pages directory.
localhost:3001/light/mdx (opens in a new tab) rendes the xeet in MDX (with the experimental mdxRs config enabled).
localhost:3001/light/suspense/1629307668568633344 (opens in a new tab) renders the xeet with a custom Suspense wrapper.
localhost:3001/dark/swr/1629307668568633344 (opens in a new tab) uses apiUrl to change the API endpoint from which the xeet is fetched in SWR mode.

The source code for react-xeet is imported from packages/react-xeet (opens in a new tab) and any changes you make to it will be reflected in the app immediately.

Introduction Vite