Open6

AWS Amplify + Next JS Tutorial ⭐ (SSR, Authentication, GraphQL, Storage... and MORE!) を見る

nasubitanasubita

1:59 - Next.JS Get Started

まずcreate-next-appしてVSCode

npx create-next-app reddit-clone
cd reddit-clone
npm run dev
code .
nasubitanasubita

3:50 - TypeScript Setup

ルートに空tsconfig.jsonを作ってnpm run dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install @types/react and @types/node by running:

        npm install --save-dev @types/react @types/node

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).

メッセージ通りtypescriptに必要なパッケージをインストール

npm install --save-dev @types/react @types/node

自動でtsconfig.jsonにデフォルト設定される。良い

nasubitanasubita

5:02 - Project Cleanup

srcフォルダを作ってpages以下を移動しても再起動すれば自動で認識してくれる
npm run dev

nasubitanasubita

5:47 - ESLint & Prettier

npx eslint --init             
You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config
Ok to proceed? (y) y
✔ 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
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · google
✔ What format do you want your config file to be in? · JSON
Checking peerDependencies of eslint-config-google@latest
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest eslint-config-google@latest eslint@>=5.16.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
.eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["plugin:react/recommended", "google", "prettier"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "require-jsdoc": "off",
    "react/react-in-jsx-scope": "off"
  }
}


.prettierrc
{
    "endOfLine": "auto",
    "printWidth": 100,
    "tabWidth": 2,
    "trailingComma": "es5"
}

環境設定はsettings.jsonに書く
command + shift + p
settings
設定(JSONを開く)

.vscode/settings.json
{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.format": true  
    }
}
_app.tsx
import type { AppProps } from "next/app";

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

export default MyApp;