> ## Documentation Index > Fetch the complete documentation index at: https://docs.neynar.com/llms.txt > Use this file to discover all available pages before exploring further. # Create a Farcaster Client with Next.js > This guide will look at creating a Farcaster client using Next.js and the Neynar React SDK. For this guide, we'll go over: Before we begin, you can access the [complete source code](https://github.com/avneesh0612/neynar-client) for this guide on GitHub. Let's get started! ## Creating the app ### Setting up the project Create a new next.js app using the following command: ```powershell PowerShell theme={"system"} npx create-next-app app-name ``` You can choose the configuration based on your personal preference, I am using this config for the guide: Create Next.js app Once the app is created, install the packages that we are going to need for the command: ```powershell npm theme={"system"} npm i @neynar/react @neynar/nodejs-sdk ``` ```powershell yarn theme={"system"} yarn add @neynar/react @neynar/nodejs-sdk ``` ```powershell bash theme={"system"} bun add @neynar/react @neynar/nodejs-sdk ``` Once the dependencies are installed you can open it in your favourite and we can start working on the client! ### Setting up Sign-in with neynar Head over to the `layout.tsx` file and wrap your app in a `NeynarContextProvider` like this: ```typescript layout.tsx theme={"system"} "use client"; import "./globals.css"; import { NeynarContextProvider, Theme } from "@neynar/react"; import "@neynar/react/dist/style.css"; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {}, onSignout() {}, }, }} > {children} ); } ``` We are passing some settings here like `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`. Neynar client ID ### Make sure to add localhost to the authorized origins * `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. I've also added a styles import from the neynar react package here which is needed for the styles of the sign-in button. Now, let's create a header component where we can add the sign-in with Neynar button. So, create a new `components/Header.tsx` file and add the following: ```typescript Header.tsx theme={"system"} "use client"; import { NeynarAuthButton } from "@neynar/react"; import Link from "next/link"; export const Header: FC = () => { return (
FarCaster App
); }; ``` We'll add the header to the `layout.tsx` file since we are going to need it on all the pages: ```typescript layout.tsx theme={"system"} "use client"; import "./globals.css"; import { NeynarContextProvider, Theme } from "@neynar/react"; import "@neynar/react/dist/style.css"; import { Header } from "@/components/Header"; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {}, onSignout() {}, }, }} >
{children} ); } ``` If you head over to your app you'll be able to see a sign-in button on the screen. Go ahead and try signing in! Sign-in button Now that our sign-in button is working let's start working on showing the feed! ### Building the feed In the `page.tsx` file add the following: ```typescript page.tsx theme={"system"} "use client"; import { NeynarFeedList, useNeynarContext } from "@neynar/react"; export default function Home() { const { user } = useNeynarContext(); return (
); } ``` Here, we are using the `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. Feed Now, let's also show the list of channels that the user is following. ### Building the channels list and channel feed To get the list of channels that a user is following we'll use the neynar APIs. So, let's first initialise the client in a new `lib/neynarClient.ts` file like this: ```typescript neynarClient.ts theme={"system"} import { NeynarAPIClient } from "@neynar/nodejs-sdk"; const neynarClient = new NeynarAPIClient(process.env.NEYNAR_API_KEY!); export default neynarClient; ``` ### Make sure to add the NEYNAR\_API\_KEY to your .env file. Then, create a new file `api/channels/route.ts` in the `app` directory and add the following: ```typescript route.ts theme={"system"} import neynarClient from "@/lib/neynarClient"; import { NextResponse } from "next/server"; export const GET = async (req: Request) => { try { const { searchParams } = new URL(req.url); const fid = searchParams.get("fid"); const channels = await neynarClient.fetchUserChannels(Number(fid)); return NextResponse.json(channels, { status: 200 }); } catch (error) { return NextResponse.json( { error: (error as any).response?.data?.message }, { status: (error as any).response?.status || 500 } ); } }; ``` This will fetch the channels a user is following using the neynarClient and return it. Let's now use it on the home page. Head back to the `page.tsx` file and add the following: ```typescript page.tsx theme={"system"} "use client"; import { Channel } from "@neynar/nodejs-sdk/build/neynar-api/v2"; import { NeynarFeedList, useNeynarContext } from "@neynar/react"; import Link from "next/link"; import { useEffect, useState } from "react"; export default function Home() { const { user } = useNeynarContext(); const [channels, setChannels] = useState(); const fetchChannels = async () => { if (!user) { return; } const response = await fetch(`/api/channels?fid=${user?.fid}`); const data = await response.json(); setChannels(data); }; useEffect(() => { if (user) { fetchChannels(); } }, [user]); return (
{user && (

Channels

{channels && channels.channels.map((channel: Channel) => (
{channel.name}
))}
)}
); } ``` Here, we are now fetching the list of channels that the user follows and creating links with the name of the channel. These link to another page which we are yet to build but you should be able to see the list of channels now! Channels Now, let's build out the channel page as well which will show the feed of a specific channel. Create a new `channel/[channelId]/page.tsx` file in the `app` folder and add the following: ```typescript page.tsx theme={"system"} import { NeynarFeedList } from "@/components/Neynar"; export default async function Page({ params: { channelId }, }: { params: { channelId: string }; }) { return (

{channelId}

); } ``` Here, you can see that we are importing the component from a `@/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: ```typescript Neynar.tsx theme={"system"} "use client"; import { NeynarProfileCard, NeynarFeedList } from "@neynar/react"; export { NeynarProfileCard, NeynarFeedList }; ``` This will filter the feed based on the channelId and show only the casts made in that channel. If you go ahead and click on one of the channels you'll be able to see something like this: Channel ### Building user profiles Let's also build a profile page for every user which shows their profile card and the casts they have created. Create a new file `profile/[username]/page.tsx` in the `app` folder and add the following: ```typescript page.tsx theme={"system"} import { NeynarProfileCard, NeynarFeedList } from "@/components/Neynar"; import neynarClient from "@/lib/neynarClient"; async function getData(username: string) { const user = await neynarClient.lookupUserByUsername(username); return { user: user.result.user }; } export default async function Page({ params: { username }, }: { params: { username: string }; }) { const { user } = await getData(username); return (
); } ``` Here, I am first resolving the username in the path to get the user object which can be later used to get the fid of the user. Then, we are displaying the `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! Profile ## Conclusion In this tutorial, we successfully built a Farcaster client with Next.js and the Neynar React SDK. Along the way, we covered essential features such as user authentication, creating feeds, fetching channels, and building user profiles. These steps give you a solid foundation to further enhance your client by adding more advanced features or customizing it to meet your specific needs. To explore the full implementation, visit the [GitHub repository](https://github.com/avneesh0612/neynar-client). If you have any questions or want to share your progress, reach out to us on [warpcast](https://warpcast.com/~/channel/neynar) or [Slack](https://neynar.com/slack).