{"id":13455659,"url":"https://github.com/wundergraph/nextjs-typescript-postgresql-graphql-realtime-chat","last_synced_at":"2025-04-15T16:44:35.940Z","repository":{"id":43496262,"uuid":"368811887","full_name":"wundergraph/nextjs-typescript-postgresql-graphql-realtime-chat","owner":"wundergraph","description":"WunderGraph Realtime Chat Example using NextJS, TypeScript, PostgreSQL, GraphQL","archived":false,"fork":false,"pushed_at":"2022-12-20T10:54:10.000Z","size":20714,"stargazers_count":62,"open_issues_count":2,"forks_count":9,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-11T21:53:33.109Z","etag":null,"topics":["authentication","graphql","graphql-subscriptions","nextjs","nextjs-typescript","postgresql","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wundergraph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-19T09:20:36.000Z","updated_at":"2025-02-15T08:11:16.000Z","dependencies_parsed_at":"2023-01-30T00:30:50.125Z","dependency_job_id":null,"html_url":"https://github.com/wundergraph/nextjs-typescript-postgresql-graphql-realtime-chat","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wundergraph%2Fnextjs-typescript-postgresql-graphql-realtime-chat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wundergraph%2Fnextjs-typescript-postgresql-graphql-realtime-chat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wundergraph%2Fnextjs-typescript-postgresql-graphql-realtime-chat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wundergraph%2Fnextjs-typescript-postgresql-graphql-realtime-chat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wundergraph","download_url":"https://codeload.github.com/wundergraph/nextjs-typescript-postgresql-graphql-realtime-chat/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249110923,"owners_count":21214422,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication","graphql","graphql-subscriptions","nextjs","nextjs-typescript","postgresql","typescript"],"created_at":"2024-07-31T08:01:08.849Z","updated_at":"2025-04-15T16:44:35.924Z","avatar_url":"https://github.com/wundergraph.png","language":"TypeScript","funding_links":[],"categories":["Build with Nextjs","TypeScript"],"sub_categories":[],"readme":"# WunderGraph Realtime Chat with Server Side Rendering (SSR) \u0026 Authentication\n\nWunderGraph Realtime Chat Example using NextJS, TypeScript \u0026 PostgreSQL\n\nDo you also hate applications that do complex login flows, loading spinners, etc. before allowing you into their app?\nHere's a simple solution how we can deliver a much better user experience while keeping the developer experience simple.\n\nThis example demonstrates how you can easily build a NextJS application with Server Side Rendering (SSR) and Realtime subscriptions in the client.\n\nWhen the user is authenticated, the initial page will be rendered server side.\nOnce the client is initialized, it will start a realtime subscription to keep the UI updated.\n\nThe example consists of two components, the NextJS service as well as the headless API service.\nThe headless API service handles authentication and API requests.\nOnce authenticated, a cookie is set by the API service.\nBoth NextJS application and headless API service run on the same root domain.\n\nThis allows us to \"forward\" the cookie header from the initial client request from the NextJS `getServerSideProps` method to the headless API service.\n\nThe code that might interest you the most can be found in [index.tsx](./pages/index.tsx)\n\n## Features\n\nFeatures:\n- Authentication\n- Authorization\n- Server Side Rendering\n- Realtime Updates\n- Cross Tab Login/Logout\n- typesafe generated Typescript Client\n\n## Prerequisites\n\nMake sure you have docker compose installed.\nAlternatively, you can use any PostgreSQL database available on localhost.\n\n## Getting Started\n\nInstall the dependencies and run the example:\n\n```shell\nyarn global add @wundergraph/wunderctl@latest\nyarn\nyarn dev\n```\n\n## Cleanup\n\n```shell\ndocker-compose rm -v -f\n```\n\n## Questions?\n\nRead the [Docs](https://wundergraph.com/docs).\n\nJoin us on [Discord](https://wundergraph.com/discord)!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwundergraph%2Fnextjs-typescript-postgresql-graphql-realtime-chat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwundergraph%2Fnextjs-typescript-postgresql-graphql-realtime-chat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwundergraph%2Fnextjs-typescript-postgresql-graphql-realtime-chat/lists"}