BBZJUN's

NEXT

https://nextjs.org/learn

NEXT 14를 사용하자

리액트 베이스의 풀스택이다!

생성

pnpm dlx create-next-app@latest

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use src/ directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/)? No / Yes
What import alias would you like configured? @/

prettier & eslint-plugin-react

pnpm add -D prettier eslint-config-prettier

pnpm add -D eslint-plugin-react eslint-plugin-react-hooks @next/eslint-plugin-next

.eslintrc.json
{
  "extends": ["next/core-web-vitals", "prettier", "plugin:react/recommended", "plugin:react/jsx-runtime", "plugin:react-hooks/recommended"]
}

pnpm add -D @trivago/prettier-plugin-sort-imports 

.prettierrc
{
  "singleQuote": true,
  "jsxSingleQuote": true,
  "semi": true,
  "trailingComma": "es5",
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrder": [
    "^next$",
    "^next/\\w*$",
    "^next/(.*)$",
    "^react$",
    "^react/(.*)$",
    "^@/lib/(.*)$",
    "^[./]"
  ]
}

프리티어 테스트

$> pnpm format
>> 오류 뜨면

pnpm format --write
>> 로 설정잡기

빌드(스타트)

pnpm build
>>빌드먼저 해주고

pnpm start

next-auth v5

$> pnpm add next-auth@beta
>> 설치


$> pnpm dlx auth secret
>> 키 생성 (.env.local)