https://github.com/aaronksaunders/next-app-react-query

A Next.js 14 application with React Query demonstrating dynamic server rendering and data management using SQLite. Built as a reference implementation for common patterns.
https://github.com/aaronksaunders/next-app-react-query

next next-ssr nextjs14 react-query server-actions sqlite

Last synced: 3 days ago
JSON representation

A Next.js 14 application with React Query demonstrating dynamic server rendering and data management using SQLite. Built as a reference implementation for common patterns.

• Host: GitHub
• URL: https://github.com/aaronksaunders/next-app-react-query
• Owner: aaronksaunders
• Created: 2024-11-09T05:25:13.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-09T05:51:26.000Z (about 2 months ago)
• Last Synced: 2024-11-09T06:28:43.460Z (about 2 months ago)
• Topics: next, next-ssr, nextjs14, react-query, server-actions, sqlite
• Language: TypeScript
• Homepage:
• Size: 195 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# SQLite Next.js Data Example

A Next.js 14 application demonstrating dynamic server rendering and data management using SQLite. Built as a reference implementation for common patterns.

## Core Features

- Server-side SQLite database operations

- Dynamic server rendering for detail pages

- **[TanStack Query (React Query) with hydration](https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr)**

- Server Actions for data mutations

- Tailwind CSS styling

## Technical Stack

- **Framework**: Next.js 14 (App Router)

- **Database**: SQLite with better-sqlite3

- **State Management**: React Query

- **Styling**: Tailwind CSS

- **TypeScript**: Full type safety

## Key Implementation Details

- Main list page (`/some-data`) with add/view functionality

- Dynamic detail pages (`/some-data/[id]`) server rendered

- Server Actions for database operations

- **TanStack Query hydration pattern for initial data**

- Optimistic updates using React Query

- Type-safe database queries

## Project Structure

```

app/

├── actions/ # Server actions & DB operations

├── page.tsx # Main list route

│ └── [id]/ # Dynamic detail pages

└── components/ # React components

```

## Use Cases

Perfect reference for:

- Next.js 14 dynamic server rendering

- SQLite integration in Next.js

- React Query with Server Actions

- TypeScript with better-sqlite3

- Simple CRUD operations

This minimal example demonstrates modern Next.js patterns for server-side rendering and data management.