Open6
AWS Amplify + Next JS Tutorial ⭐ (SSR, Authentication, GraphQL, Storage... and MORE!) を見る
1:59 - Next.JS Get Started
まずcreate-next-appしてVSCode
npx create-next-app reddit-clone
cd reddit-clone
npm run dev
code .
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にデフォルト設定される。良い
5:02 - Project Cleanup
srcフォルダを作ってpages以下を移動しても再起動すれば自動で認識してくれる
npm run dev
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;
15:07 - Material UI Setup
動画の方がMUI exampleより古くてハマる
MUIは本家で学ぶ