npx create-next-app .

yarn add @apollo/client graphql @apollo/react-hooks cross-fetch @heroicons/[email protected]

yarn add [email protected] [email protected]
yarn add [email protected]
yarn add -D [email protected] [email protected] [email protected] @testing-library/[email protected] @types/[email protected] @testing-library/[email protected] @testing-library/[email protected] @testing-library/[email protected] [email protected] @babel/[email protected] jest-css-modules

touch .babelrc
{
    "presets": ["next/babel"]
}

//package,json
"jest": {
    "testPathIgnorePatterns": [
        "<rootDir>/.next/",
        "<rootDir>/node_modules/"
    ],
    "moduleNameMapper": {
        "\\.(css)$": "<rootDir>/node_modules/jest-css-modules"
    }
}
    
"scripts": {
    ...
    "test": "jest --env=jsdom --verbose"
},

{
    "singleQuote": true,
    "semi": false
}

touch tsconfig.json
yarn add -D typescript @types/[email protected] @types/node
yarn dev

_app.js, index.js -> _app.tsx, index.tsxに変更

yarn add tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

//tailwind.config.js
module.exports = {
    content: [
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
    ],
    darkMode: false,
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

yarn add -D @graphql-codegen/cli
yarn graphql-codegen init

//スキーマファイルの置き場所
queries/**/*.ts
//output
types/generated/graphql.tsx
//codegenのscript
gen-types

yarn
yarn add -D @graphql-codegen/typescript