{"id":15764876,"url":"https://github.com/thorwebdev/next-supabase-typescript","last_synced_at":"2025-03-31T10:24:35.203Z","repository":{"id":77094423,"uuid":"293580526","full_name":"thorwebdev/next-supabase-typescript","owner":"thorwebdev","description":"Swagger to TS experimentation with Supabase.io","archived":false,"fork":false,"pushed_at":"2020-09-07T16:41:43.000Z","size":91,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T02:51:58.321Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://youtu.be/DlfscuJzdD8","language":"JavaScript","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/thorwebdev.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-07T16:38:09.000Z","updated_at":"2023-02-11T12:19:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"b4b2b975-2172-47d9-b0c3-bba256382290","html_url":"https://github.com/thorwebdev/next-supabase-typescript","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/thorwebdev%2Fnext-supabase-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thorwebdev%2Fnext-supabase-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thorwebdev%2Fnext-supabase-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thorwebdev%2Fnext-supabase-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thorwebdev","download_url":"https://codeload.github.com/thorwebdev/next-supabase-typescript/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246451837,"owners_count":20779697,"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":[],"created_at":"2024-10-04T12:22:08.961Z","updated_at":"2025-03-31T10:24:35.182Z","avatar_url":"https://github.com/thorwebdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Next.js with Supabase.io \u0026 TypeScript\n\nhttps://supabase.io/docs/library/getting-started#usage-with-typescript\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.\n\n## Usage with TypeScript\n\nSupabase-js ships with type definitions for usage with TypeScript and for convenient IntelliSense autocomplete and documentation in your editor.\n\nWhen using TypeScript, you can pass the type of database row as a type parameter to the `from` method to get better autocompletion support down the chain. \nIf you don't provide a type for the row you need to explicitly pass `from\u003cany\u003e('tableName')`.\n\n```ts\ntype Message = {\n  id: number;\n  inserted_at: string;\n  message: string;\n  user_id: string;\n  channel_id: number;\n  author: { username: string };\n};\n\nconst response = await supabase\n  .from\u003cMessage\u003e('messages') // Message maps to the type of the row in your database.\n  .select('*, author:user_id(username)')\n  .match({ channel_id: 2 }); // Your IDE will be able to help with automcompletion.\nresponse.body // Response body will be of type Array\u003cMessage\u003e.\n\n// If you don't provide a type for the row you need to explicitly pass `from\u003cany\u003e('tableName')`.\nconst response = await supabase\n  .from\u003cany\u003e('messages')\n  .select('*, author:user_id(username)')\n  .match({ channel_id: 2 });\nresponse.body // Response body will be of type Array\u003cany\u003e.\n```\n\n### Generate database types from Swagger OpenAPI specification\n\nSupabase generates a Swagger speficiation file for your database which can be used to generate your data types for usage with TypeScript.\n\nThe Swagger specification for your Supabase project can be accessed as follows:\n\n```txt\nhttps://your-project.supabase.co/rest/v1/?apikey=your-anon-key\n```\n\nUsing the open source [swagger-to-ts](https://github.com/manifoldco/swagger-to-ts#%EF%B8%8F-reading-specs-from-remote-resource) tool you can generate your types and store them locally:\n\n```bash\nnpx @manifoldco/swagger-to-ts https://your-project.supabase.co/rest/v1/?apikey=your-anon-key --output types/supabase.ts\n```\n\n**Note:** Do note that your local types won't automatically stay in sync with your database, so make sure to regenerate your types after your make changes to your database.\n\nAfter you have generated your types, you can use them in your TypeScript projects:\n\n```ts\nimport { NextApiRequest, NextApiResponse } from \"next\";\nimport { createClient } from \"@supabase/supabase-js\";\nimport { definitions } from \"../../types/supabase\";\n\nconst supabase = createClient(\n  process.env.NEXT_PUBLIC_SUPABASE_URL,\n  process.env.SUPABASE_SECRET_KEY\n);\n\nexport default async (req: NextApiRequest, res: NextApiResponse) =\u003e {\n  const allOnlineUsers = await supabase\n    .from\u003cdefinitions[\"users\"]\u003e(\"users\")\n    .select(\"*\")\n    .eq(\"status\", \"ONLINE\");\n  res.status(200).json(allOnlineUsers);\n};\n```\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthorwebdev%2Fnext-supabase-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthorwebdev%2Fnext-supabase-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthorwebdev%2Fnext-supabase-typescript/lists"}