npx create-next-app --typescript

// npm
npm run dev

// yarn
yarn dev

npm i --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
# 今回の場合、Next.jsの生成時にTypeScriptを指定したので、このコマンドは不要
# npx tsc --init
npx eslint --init

✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / [Yes]
✔ Where does your code run? · browser, node
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JSON
Checking peerDependencies of eslint-config-airbnb@latest
The config that you've selected requires the following dependencies:

eslint-plugin-react@^7.21.5 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.22.1 eslint-plugin-jsx-a11y@^6.4.1 eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0 @typescript-eslint/parser@latest
✔ Would you like to install them now with npm? · No / [Yes]
(以下略)

npm install --save-dev prettier
npm install --save-dev eslint-config-prettier

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

let text = "Hello, world"

$ npx eslint temp.ts

(omitted)/temp.ts
  1:5  error  'text' is never reassigned. Use 'const' instead  prefer-const
  1:5  error  'text' is assigned a value but never used        no-unused-vars

✖ 2 problems (2 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

$ npx prettier temp.ts
let text = 'Hello, world'

module.exports = {
  extends: [
    //...
    'plugin:@next/next/recommended',
  ],
}

.anyElement {
  background-color: antiquewhite; // 背景色を指定する
  border: 1px solid red; // 外枠を指定する
}

.a .b {

}

<div className={styles.contents}>
            <h1>Career</h1>
</div>

.contents h1 {
  text-decoration: underline;
}

padding: 2rem 2rem 2rem 2rem;

padding: 2rem

a:hover,
a:focus,
a:active {
  text-decoration: underline;
}

export default function OtherSites() {
  return (
    <div className={otherSiteStyles.links}>
      {otherSites.map(({ Comp, link, alt }) => {
        return (
          <a key={link} href={link} aria-label={alt}>
            <Comp height={32} />
          </a>
        )
      })}
    </div>
  )
}

type Props = {
  height: number
}

const Github = (props: Props) => (
// 略

@media (max-width: 600px) {
  .contents {
    width: 100%;
    margin: 0.5rem;
    padding: 0.5rem;
  }

  .main {
    width: 100%;
  }

  .cardsRow {
    max-width: 100rem;
  }
}

@media (max-width: 600px) {
  .profile {
    flex-direction: column;
  }

  .right {
    align-items: center;
  }
}