{"id":19719486,"url":"https://github.com/gomagoma676/nextjs-hasura-firebase-react-query","last_synced_at":"2025-04-29T21:30:28.855Z","repository":{"id":49767074,"uuid":"377461081","full_name":"GomaGoma676/nextjs-hasura-firebase-react-query","owner":"GomaGoma676","description":"[Hasura応用編] Nextjs + Firebase + HasuraによるGraphQL Web開発 : Section 3 🚀","archived":false,"fork":false,"pushed_at":"2022-08-30T09:31:23.000Z","size":116,"stargazers_count":9,"open_issues_count":0,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T19:23:31.515Z","etag":null,"topics":["firebase","hasura-graphql","nextjs","react-query"],"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/GomaGoma676.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-06-16T10:42:34.000Z","updated_at":"2024-01-30T15:33:20.000Z","dependencies_parsed_at":"2023-01-16T17:15:09.778Z","dependency_job_id":null,"html_url":"https://github.com/GomaGoma676/nextjs-hasura-firebase-react-query","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/GomaGoma676%2Fnextjs-hasura-firebase-react-query","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GomaGoma676%2Fnextjs-hasura-firebase-react-query/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GomaGoma676%2Fnextjs-hasura-firebase-react-query/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GomaGoma676%2Fnextjs-hasura-firebase-react-query/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GomaGoma676","download_url":"https://codeload.github.com/GomaGoma676/nextjs-hasura-firebase-react-query/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251585721,"owners_count":21613269,"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":["firebase","hasura-graphql","nextjs","react-query"],"created_at":"2024-11-11T23:08:28.881Z","updated_at":"2025-04-29T21:30:28.569Z","avatar_url":"https://github.com/GomaGoma676.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 🌟 Project setup 🚀\n## 1. create next app\n### 1-1. yarn install *インストールしていない場合\n    npm install --global yarn\n    yarn --version\n### 1-2.  create-next-app\n    npx create-next-app . --ts\n#### Node.js version 10.13以降が必要です。 -\u003e ターミナル `node -v`でver確認出来ます。\n### 1-3.  Redux toolkit のインストール\n    yarn add @reduxjs/toolkit react-redux\n    yarn add -D @types/react-redux\n### 1-4.  各種moduleのインストール\n    yarn add firebase@8.10.0 universal-cookie @heroicons/react@1.0.6\n    yarn add react-query@3.39.0 react-query-devtools graphql graphql-request\n### 1-5.  prettierの設定 : settingsでRequire Config + Format On Saveにチェック\n    touch .prettierrc\n~~~\n{\n    \"singleQuote\": true,\n    \"semi\": false\n}\n~~~ \n## ~~2. TypeScript の導入~~\nhttps://nextjs.org/learn/excel/typescript/create-tsconfig\n### 2-1. 空のtsconfig.json作成\n    touch tsconfig.json\n### 2-2. 必要moduleのインストール\n    yarn add -D typescript @types/react @types/node\n### 2-3. 開発server起動\n    yarn dev\n### 2-4. _app.js, index.js -\u003e tsx へ拡張子変更\n### 2-5. AppProps型追記\n~~~\nimport { AppProps } from 'next/app'\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n    return \u003cComponent {...pageProps} /\u003e\n}\n\nexport default MyApp\n~~~\n\n## 3. Tailwind CSS の導入\nhttps://tailwindcss.com/docs/guides/nextjs\n### 3-1. 必要moduleのインストール\n    yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest\n### 3-2. tailwind.config.js, postcss.config.jsの生成\n    npx tailwindcss init -p\n### 3-3. tailwind.config.jsのcontent設定追加\n~~~\nmodule.exports = {\n   content: [\n    \"./pages/**/*.{js,ts,jsx,tsx}\",\n    \"./components/**/*.{js,ts,jsx,tsx}\",\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}\n~~~\n### 3-4. globals.cssの編集\n~~~\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n~~~\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgomagoma676%2Fnextjs-hasura-firebase-react-query","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgomagoma676%2Fnextjs-hasura-firebase-react-query","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgomagoma676%2Fnextjs-hasura-firebase-react-query/lists"}