{"id":16364069,"url":"https://github.com/rphlmr/nextjs-client-hints","last_synced_at":"2025-10-26T05:31:28.476Z","repository":{"id":193544700,"uuid":"689016197","full_name":"rphlmr/nextjs-client-hints","owner":"rphlmr","description":"A NextJS demo about client hints and user preferences","archived":false,"fork":false,"pushed_at":"2023-09-11T08:26:14.000Z","size":35,"stargazers_count":10,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-10T05:12:42.240Z","etag":null,"topics":["client-hints","nextjs","nextjs13","serveractions"],"latest_commit_sha":null,"homepage":"https://nextjs-client-hints.vercel.app/","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/rphlmr.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,"governance":null}},"created_at":"2023-09-08T15:42:24.000Z","updated_at":"2024-08-04T08:52:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"4464debd-2f8d-41a7-bec1-102728565dbc","html_url":"https://github.com/rphlmr/nextjs-client-hints","commit_stats":null,"previous_names":["rphlmr/nextjs-client-hints"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rphlmr%2Fnextjs-client-hints","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rphlmr%2Fnextjs-client-hints/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rphlmr%2Fnextjs-client-hints/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rphlmr%2Fnextjs-client-hints/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rphlmr","download_url":"https://codeload.github.com/rphlmr/nextjs-client-hints/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238264790,"owners_count":19443413,"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":["client-hints","nextjs","nextjs13","serveractions"],"created_at":"2024-10-11T02:29:13.608Z","updated_at":"2025-10-26T05:31:23.153Z","avatar_url":"https://github.com/rphlmr.png","language":"TypeScript","readme":"\n\n\nhttps://github.com/rphlmr/nextjs-client-hints/assets/20722140/d873666a-ff41-4bca-bbbe-999ec505c4fd\n\n\n\nThis is a [Next.js](https://nextjs.org/) demo handling client hints and user preferences without any hydration error.\n\nIt is largely based on the Remix Run stack [The Epic Stack](https://github.com/epicweb-dev/epic-stack) from \u003ca href=\"https://kentcdodds.com\"\u003eKent C. Dodds\u003c/a\u003e and\n    \u003ca href=\"https://github.com/epicweb-dev/epic-stack/graphs/contributors\"\u003econtributors\u003c/a\u003e.\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n## What is solved here\n\nYou have no request headers for the user timezone or it color scheme preference.\nIf you want to use one of this, you can only access that client side and you will have hydration issues: server side rendered content will be different from the client side rendered one.\n\n## How to use it\nJust copy/paste the [src/utils](src/utils) folder in your project and use the `ClientHintsProvider` and `UserPreferencesProvider` in your root layout.\n\n```tsx\nexport default function RootLayout({\n\tchildren,\n}: {\n\tchildren: React.ReactNode;\n}) {\n\tconst clientHints = getClientHints();\n\tconst userPrefs = getUserPrefs();\n\tconst theme = userPrefs.theme || clientHints.prefersColorScheme;\n\n\treturn (\n\t\t\u003chtml lang=\"en\"\u003e\n\t\t\t\u003chead\u003e\n\t\t\t\t\u003cClientHintsCheck /\u003e\n\t\t\t\u003c/head\u003e\n\t\t\t\u003cbody\n\t\t\t\tclassName={cn(\n\t\t\t\t\tinter.className,\n\t\t\t\t\ttheme,\n\t\t\t\t\t\"grid items-center justify-center gap-y-6\",\n\t\t\t\t)}\n\t\t\t\u003e\n\t\t\t\t\u003cClientHintsProvider clientHints={clientHints}\u003e\n\t\t\t\t\t\u003cUserPrefsProvider userPrefs={userPrefs}\u003e\n\t\t\t\t\t\t\u003cnav className=\"inline-flex items-center justify-end py-2\"\u003e\n\t\t\t\t\t\t\t\u003cThemeSelector /\u003e\n\t\t\t\t\t\t\u003c/nav\u003e\n\n\t\t\t\t\t\t\u003cmain className=\"space-y-6 max-w-md\"\u003e{children}\u003c/main\u003e\n\t\t\t\t\t\u003c/UserPrefsProvider\u003e\n\t\t\t\t\u003c/ClientHintsProvider\u003e\n\t\t\t\u003c/body\u003e\n\t\t\u003c/html\u003e\n\t);\n}\n```\n\n## Learn More\n\nAll the non-magic happens in the [src/utils/client-hints](src/utils/client-hints) \u0026  [src/utils/user-preferences](src/utils/user-preferences/) folders.\n\nIn [src/utils/client-hints/components.tsx](src/utils/client-hints/components.tsx), `ClientHintsCheck` is a component that is rendered in the `\u003chead\u003e` of our document before anything else. That component renders a small and fast inline script which checks the user's cookies for the expected client hints. If they are not present or if they're outdated, it sets a cookie and triggers a reload of the page.\n\nThen, we use regular `cookies()` function in root layout to read the cookie and set the client hints in a `ClientHintsProvider`.\nWe do the same for user preferences (like its selected theme).\n\nSee [Client Hints decision from The Epic Stack](https://github.com/epicweb-dev/epic-stack/blob/e20e5e1b18a62d793a4ead0a542dca65cb23fb9a/docs/client-hints.md)\n\n## Learn more about client hints\nThe [Client Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints) are a set of HTTP request header fields that a server can proactively request from a client to get information about the device, network, user, and user-agent-specific preferences. The server can determine which resources to send, based on the information that the client chooses to provide.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frphlmr%2Fnextjs-client-hints","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frphlmr%2Fnextjs-client-hints","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frphlmr%2Fnextjs-client-hints/lists"}