{"id":19719494,"url":"https://github.com/gomagoma676/nextjs-hasura-basic-lesson","last_synced_at":"2025-06-13T10:09:29.011Z","repository":{"id":41570252,"uuid":"359297749","full_name":"GomaGoma676/nextjs-hasura-basic-lesson","owner":"GomaGoma676","description":"[Hasura基礎編] Nextjs+Hasura+Apollo Clientで学ぶモダンGraphQL Web開発 🚀","archived":false,"fork":false,"pushed_at":"2023-07-13T03:43:26.000Z","size":190,"stargazers_count":57,"open_issues_count":0,"forks_count":20,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-06-13T10:06:39.015Z","etag":null,"topics":["apolloclient","hasura-graphql","msw","nextjs","react-testing-library"],"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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-04-19T01:51:52.000Z","updated_at":"2025-04-13T04:37:39.000Z","dependencies_parsed_at":"2025-04-29T21:43:20.440Z","dependency_job_id":null,"html_url":"https://github.com/GomaGoma676/nextjs-hasura-basic-lesson","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/GomaGoma676/nextjs-hasura-basic-lesson","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GomaGoma676%2Fnextjs-hasura-basic-lesson","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GomaGoma676%2Fnextjs-hasura-basic-lesson/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GomaGoma676%2Fnextjs-hasura-basic-lesson/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GomaGoma676%2Fnextjs-hasura-basic-lesson/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GomaGoma676","download_url":"https://codeload.github.com/GomaGoma676/nextjs-hasura-basic-lesson/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GomaGoma676%2Fnextjs-hasura-basic-lesson/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259624720,"owners_count":22886328,"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":["apolloclient","hasura-graphql","msw","nextjs","react-testing-library"],"created_at":"2024-11-11T23:08:30.484Z","updated_at":"2025-06-13T10:09:28.971Z","avatar_url":"https://github.com/GomaGoma676.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Project setup : \n#### ・Nextjs\n#### ・TypeScript\n#### ・Apollo Client\n#### ・React-testing-library\n#### ・Next-page-tester\n#### ・Tailwind CSS\n#### ・Mock Service Worker(MSW)\n\n## 1. Nextjs Project 新規作成\n### 1-1. yarn install *インストールしていない場合\n    npm install --global yarn\n    yarn --version\n### 1-2.  create-next-app\n    npx create-next-app@11.1.2 .\n#### Node.js version 10.13以降が必要です。 -\u003e ターミナル `node -v`でver確認出来ます。\n### 1-3.  Apollo Client + heroicons + cross-fetch のインストール\n    yarn add @apollo/client@3.3.15 graphql@15.5.0 @apollo/react-hooks@4.0.0 cross-fetch@3.1.4 @heroicons/react@1.0.6\n### 1-4.  React-Testing-Library + MSW + next-page-tester のインストール\n    yarn add react@17.0.2 react-dom@17.0.2\n    yarn add next@11.1.2\n    yarn add -D msw@0.35.0 next-page-tester@0.29.0 jest@26.6.3 @testing-library/react@11.2.6 @types/jest@26.0.22 @testing-library/jest-dom@5.11.10 @testing-library/dom@7.30.3 @testing-library/user-event@13.1.3 babel-jest@26.6.3 @babel/core@7.17.9 jest-css-modules\n### 1-5.  Project folder 直下に\".babelrc\"ファイルを作成して下記設定を追加\n    touch .babelrc\n~~~\n    {\n        \"presets\": [\"next/babel\"]\n    }\n~~~\n### 1-6.  package.json に jest の設定を追記\n~~~\n    \"jest\": {\n        \"testPathIgnorePatterns\": [\n            \"\u003crootDir\u003e/.next/\",\n            \"\u003crootDir\u003e/node_modules/\"\n        ],\n        \"moduleNameMapper\": {\n            \"\\\\.(css)$\": \"\u003crootDir\u003e/node_modules/jest-css-modules\"\n        }\n    }\n~~~\n### 1-7.  package.jsonに test scriptを追記\n~~~\n    \"scripts\": {\n        ...\n        \"test\": \"jest --env=jsdom --verbose\"\n    },\n~~~\n### 1-8.  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@17.0.41 @types/node@14.14.41\n### 2-3. 開発server起動\n    yarn dev\n### 2-4. _app.js, index.js -\u003e tsx へ拡張子変更\n### 2-5. AppProps型追記\n~~~\n    import { AppProps } from 'next/app'\n\n    function MyApp({ Component, pageProps }: AppProps) {\n        return \u003cComponent {...pageProps} /\u003e\n    }\n\n    export default MyApp\n~~~\n\n## 3. Tailwind CSS の導入\nhttps://tailwindcss.com/docs/guides/nextjs\n### 3-1. 必要moduleのインストール\n    yarn add 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    darkMode: false,\n    theme: {\n        extend: {},\n    },\n    variants: {\n        extend: {},\n    },\n    plugins: [],\n}\n~~~\n### 3-4. globals.cssの編集\n~~~\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n~~~\n## 4. Test動作確認\n### 4-1. `__tests__`フォルダと`Home.test.tsx`ファイルの作成\n~~~\nimport { render, screen } from '@testing-library/react'\nimport '@testing-library/jest-dom/extend-expect'\nimport Home from '../pages/index'\n\nit('Should render title text', () =\u003e {\n  render(\u003cHome /\u003e)\n  expect(screen.getByText('Next.js!')).toBeInTheDocument()\n})\n~~~\n### 4-2. yarn test -\u003e テストがPASSするか確認\n~~~\n PASS  __tests__/Home.test.tsx\n  ✓ Should render hello text (20 ms)\n\nTest Suites: 1 passed, 1 total\nTests:       1 passed, 1 total\nSnapshots:   0 total\nTime:        1.728 s, estimated 2 s\n~~~\n## 5. GraphQL codegen\n### 5-1.  install modules + init\n    yarn add -D @graphql-codegen/cli@1.21.3\n    yarn graphql-codegen init\n    yarn\n    yarn add -D @graphql-codegen/typescript@1.21.1\n### 5-2.  add queries in queries/queries.ts file\n### 5-3.  generate types automatically\n    yarn gen-types\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgomagoma676%2Fnextjs-hasura-basic-lesson","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgomagoma676%2Fnextjs-hasura-basic-lesson","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgomagoma676%2Fnextjs-hasura-basic-lesson/lists"}