Tanstack Query with Next.js 14+

This project demonstrates the integration of Tanstack Query (React Query) with Next.js 14+ Server Components, showcasing different data fetching patterns and state management techniques.

Features

• Server-side data fetching with Tanstack Query
• Demonstrates two different patterns:
  • Initial Data technique (Posts page)
  • Hydration technique (Comments page)
• Uses JSONPlaceholder API for demo data
• Built with TypeScript and Tailwind CSS

Getting Started

1. Clone the repository:

git clone https://github.com/nirajrajgor/tanstack-query-with-nextjs14

2. Navigate to the project directory:

cd your-repo

3. Install dependencies using your preferred package manager:

# Using npm
npm install

# Using Yarn
yarn install

# Using pnpm
pnpm install

# Using bun
bun install

4. Start the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.