コピペで完成するNext.js+Chakra UIスタートアップノート

自分用メモ。

1.アプリケーションを作成

とにもかくにもファイル作成

npx create-next-app sample-app --typescript

ESLintの導入

yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

// .eslintrc.js

module.exports = {
  plugins: ['prettier'],
  extends: [
    'react-app',
    'plugin:@next/next/recommended',
    'next/core-web-vitals',
  ],
  rules: {
    'prettier/prettier': 'error',
  },
};

.eslintrc.jsonファイルが存在した場合は、.jsonの方を削除しておきます。

Prettierの導入

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

// .prettierrc

{
    "trailingComma": "es5",
    "tabWidth": 2,
    "arrowParens": "always",
    "singleQuote": true
}

2. Chakra UIの導入

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

yarn add -D @chakra-ui/icons

// src/theme/index.ts

import { extendTheme } from '@chakra-ui/react';

const colors = {
  example: 'tomato',
};
const styles = {
  global: {
    html: {
      fontSize: '62.5%',
    },
    body: {
      color: 'black',
      fontSize: '1.4rem',
      fontFamily: 'body',
      a: {
        textDecoration: 'none',
      },
      li: {
        listStyleType: 'none',
      },
    },
    '::selection': {
      background: 'tomato',
    },
    '::-moz-selection': {
      background: 'tomato',
    },
  },
};
const fonts = {
  body: "'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif",
};
const breakpoints = {
  sm: '500px',
  md: '640px',
  lg: '820px',
  // example
};
const textStyles = {
  bodyWidth: {
    width: {
      base: '90vw',
      sm: '80vw',
    },
    mx: 'auto',
  },
};

const theme = extendTheme({
  styles,
  colors,
  fonts,
  textStyles,
  breakpoints,
});

export default theme;

// pages/_app.tsx

import type { AppProps } from 'next/app';
import { ChakraProvider } from '@chakra-ui/react';
import theme from '../src/theme';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider resetCSS theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;