Create Next App

 npx create-next-app <プロジェクト名> --typescript

ディレクトリの移動

mkdir src
mv pages src/pages
mv styles src/styles

tama8021 2021/12/23

nodeのバージョン設定

nodenv local <nodeバージョン>

tama8021 2021/12/23

ESlintの設定

tama8021 2021/12/23

Prettier導入

tama8021 2021/12/24に更新

Chakra-uiの導入

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

tama8021 2021/12/24

Jest導入

tama8021 2021/12/24

Renovate導入

インストール
https://github.com/apps/renovate
PR作成後merge(オンボーディング）
renovate.json設定ファイルに追加

{
 "extends": ["config:base"],
 "labels": ["dependencies"],
 "packageRules": [
   {
     "depTypeList": ["devDependencies"],
     "automerge": true
   }
 ],
 "timezone": "Asia/Tokyo",
 "schedule": ["every weekend"]
}

tama8021 2021/12/24

Apollo Clientの導入

yarn add @apollo/client graphql

_app.tsx

import '../styles/globals.css';

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import { AppProps } from 'next/dist/next-server/lib/router/router';

const cache = new InMemoryCache();
const client = new ApolloClient({
  uri: `${process.env.NEXT_PUBLIC_BACKEND_URL}/graphql`,
  cache,
});

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

export default MyApp;