Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/diedemiguel/lists-server-actions
Exploring better design patterns in NextJS
https://github.com/diedemiguel/lists-server-actions
lists nextjs15 server server-functions usetransition
Last synced: 3 days ago
JSON representation
Exploring better design patterns in NextJS
- Host: GitHub
- URL: https://github.com/diedemiguel/lists-server-actions
- Owner: dieDeMiguel
- Created: 2024-11-10T16:42:13.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-18T13:35:27.000Z (about 2 months ago)
- Last Synced: 2024-11-18T15:13:44.327Z (about 2 months ago)
- Topics: lists, nextjs15, server, server-functions, usetransition
- Language: TypeScript
- Homepage: https://lists-server-actions.vercel.app/
- Size: 352 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# List + Server Actions NextJS 15
## Exploring best practices using NextJS 15, Server Functions and Server Components
### Main Features
- **Pagination**: Content is paginated to enhance user experience, allowing users to navigate through data efficiently.
- **Tailored "Next and Previous" Buttons**: Users can seamlessly navigate between paginated tables with buttons that are appropriately enabled or disabled based on the current page.
- **Search**: Users can search through the tabulated data while preserving pagination behavior, ensuring a smooth and intuitive search experience.
- **Loading States**: The `useTransition` hook is utilized to provide the best possible user experience by displaying loading states during data fetching and transitions.
- **Server-Side Rendering (SSR)**: The component architecture is designed to leverage SSR, providing an optimized and fast user experience by rendering content on the server.
### Installation:
- We'll use pnpm
```sh
pnpm install
```
- Setup your environment variables
```bash
cp .env.example .env.development.local
```
- Then, open the `.env.development.local` file and fill in the required environment variables.
- You'll need all the `POSTGRES_*` variables from the Vercel dashboard to access the Vercel Postgres API. The Vercel Postgres API is used to store the current backgrounds and their status.
- You can get all the Vercel variables by using the Vercel CLI by running `vercel link`
- Initialize your DB
```
psql "" -f src/db/schema.psql
```
- Run the development server
```
pnpm dev
```
You're all set : ) Happy Coding