npm install --global yarn
yarn --version

npx create-next-app@11.1.2 .

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

yarn add react@17.0.2 react-dom@17.0.2
yarn add next@11.1.2
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

touch .babelrc

    {
        "presets": ["next/babel"]
    }

    "jest": {
        "testPathIgnorePatterns": [
            "<rootDir>/.next/",
            "<rootDir>/node_modules/"
        ],
        "moduleNameMapper": {
            "\\.(css)$": "<rootDir>/node_modules/jest-css-modules"
        }
    }

    "scripts": {
        ...
        "test": "jest --env=jsdom --verbose"
    },

touch .prettierrc

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

touch tsconfig.json

yarn add -D typescript @types/react@17.0.41 @types/node@14.14.41

yarn dev

    import { AppProps } from 'next/app'

    function MyApp({ Component, pageProps }: AppProps) {
        return <Component {...pageProps} />
    }

    export default MyApp

yarn add tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init -p

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

@tailwind base;
@tailwind components;
@tailwind utilities;

import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import Home from '../pages/index'

it('Should render title text', () => {
  render(<Home />)
  expect(screen.getByText('Next.js!')).toBeInTheDocument()
})

 PASS  __tests__/Home.test.tsx
  ✓ Should render hello text (20 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.728 s, estimated 2 s

yarn add -D @graphql-codegen/cli@1.21.3
yarn graphql-codegen init
yarn
yarn add -D @graphql-codegen/typescript@1.21.1

yarn gen-types