This guide will look at creating a Farcaster client using Next.js and the Neynar React SDK.
layout.tsx
file and wrap your app in a NeynarContextProvider
like this:
clientId
, defaultTheme
and eventsCallbacks
.
clientId
: This is going to be the client ID you get from your neynar, add it to your .env.local
file as NEXT_PUBLIC_NEYNAR_CLIENT_ID
.defaultTheme
: default theme lets you change the theme of your sign-in button, currently, we have only light mode but dark mode is going to be live soon.eventsCallbacks
: This allows you to perform certain actions when the user signs out or auth is successful.components/Header.tsx
file and add the following:
layout.tsx
file since we are going to need it on all the pages:
page.tsx
file add the following:
NeynarFeedList
component to show the trending casts if the user is not signed in, but, if they are signed in we show the following feed based on their fid.
lib/neynarClient.ts
file like this:
api/channels/route.ts
in the app
directory and add the following:
page.tsx
file and add the following:
channel/[channelId]/page.tsx
file in the app
folder and add the following:
@/components/Neynar
file and not the package directly because it is a client component. So, create a new components/Neynar.tsx
file and add the following:
profile/[username]/page.tsx
in the app
folder and add the following:
ProfileCard
and the FeedList
filtered based on the user’s fid. If you go to /profile/username then you’ll be able to see the user’s profile!