Im Bay

Test in Next.js cmd 창 프로젝트 최상단 디렉터리 위치에서 npm i -D @testing-library/jest-dom@5.16.5 @testing-library/react @testing-library/user-event jest jest-environment-jsdom ts-jest ts-node 입력 package.json scripts 블록에 아래 코드 추가 "test": "jest", "test:watch": "jest --watchAll" cmd 창 프로젝트 최상단 디렉터리 위치에서 npm init jest@latest 입력 jest.config.ts에 아래 코드 추가 // setupFilesAfterEnv: ['/jest.setup.ts'], moduleNameMapper: ..

dynamic metadata 예시 export async function generateMetadata({ params: { todoId } }: Params): Promise { const todo: Todo = await getTodo(todoId); return { title: todo.title, }; } .env 지원 default support dotenv .env.local (또는 .env.development.local) .env.development .env next.config.js process.env.customKey 로 사용 가능 module.exports = { env: { customKey: 'my-value', }, } 민감한 정보는 키 값 그대로 commit & push ..

Error Page app/error.tsx 생성 error page는 client에서만 랜더링 된다. 예시 'use client'; import { useEffect } from 'react'; export default function Error({ error, reset,}: { error: Error & { digest?: string }; reset: () => void; }) { useEffect(() => { }, [error]); return ( Something went wrong! {error.stack || error.message} reset()}> Try again ); } Loading Page app/todos/loading.tsx 생성하면 자식 페이지(todos/[todoId..

Next.js - NextAuth 소셜 로그인 next-auth 설치 cmd 창 프로젝트 최상단 디렉터리 위치에서 npm install next-auth@beta 입력 https://authjs.dev/reference/core 에서 Provider 확인 가능 next-auth 사용 cmd 창 프로젝트 최상단 디렉터리 위치에서 openssl 입력 (openssl 미설치 시 아래 확인!) rand -base64 32 입력 입력 후 나오는 결과가 .env.local 의 AUTH_SECRET .env.local 파일 생성 후 openssl에서 발급한 AUTH_SECRET 결과 넣어주기 .env.local 예시 AUTH_SECRET=openssl에서 발급한 auth_secret 값 넣어주기 GOOGLE_CLIE..

Server API 만들기 NextRequest와 NextResponse 사용 예시 import { NextRequest, NextResponse } from 'next/server'; export async function GET(req: NextRequest) { const { pathname, searchParams, host } = req.nextUrl; return NextResponse.json({ id: 1, name: 'Hong', pathname, str: searchParams.get('str'), ip: req.ip || host, // cookies: req.cookies.getAll(), }); } middleware app 폴더 속이 아닌 app과 동일한 위치 폴더에 middle..

shadcn/ui 설치 cmd 창 next 프로젝트 최상단 디렉터리에서 npx shadcn-ui@latest init 입력 style: Default 선택 color: Slate 선택 CSS variables: yes 선택 shadcn/ui 사용 shadcn/ui는 필요한 컴포넌트를 바로바로 install 하여 사용할 수 있다. https://ui.shadcn.com/docs/components/accordion 에서 필요한 컴포넌트 검색 후 install 하기 예시 버튼 사용하기 npx shadcn-ui@latest add button 입력 자동으로 button.tsx 생성 완료

Data Fetch Sample CSR (Client Side Rendering) 파일에 최상단에 ‘use client’; 작성 SSG (Static Site Generation) getStaticProps cache: “no-store” SSR (Server Side Rendering) getServerSideProps cache: “force-cache” ISR next: { revalidate: 초, }

Next.js - Layout, Template, Page, Route, Link Link 기본 형태 button ex) Home a tag는 자동 생성 useRouter import { useRouter } from 'next/navigation'; const router = useRouter(); usePathname import { usePathname } from 'next/navigation’; const pathname = usePathname(); redirect import { redirect } from 'next/navigation’; if (…) redirect('/login'); Next.js - Routes Dynamic Routes Nested Dynamic Routes /sho..

프로젝트 생성 cmd 창 프로젝트 위치에서 npx create-next-app@latest 입력 프로젝트 실행 cmd 창 위에서 만든 project name 위치로 이동 yarn lint 입력 yarn dev 입력 http://localhost:3000/ 접속 기타 prettier 설치 cmd 창 project name 위치에서 npm i -D prettier eslint-config-prettier 입력 package.json 파일의 scripts 블록 안에 "prettier": "prettier --write .” 추가 .eslintrc.json 파일의 extends 안에 "prettier" 추가, extends 아래에 "rules": { "no-unused-vars": "error" } 추가 .pr..

Next.js란 React 기반 풀스택 웹 개발 프레임워크 PageRouter, AppRouter Multiple Rendering Types (SSG, CSR, SSR, ISR) TailwindCSS, TypeScript, Optimization(Image, Font, Scripts, Core Web Vitals) Next Rendering Methods SSG (Static Site Generation) Build시 미리 생성 (getStaticProps) SSR (Server Side Rendering) 요청(request)시 생성해서 응답 (getServerSideProps) ISR (Incremental Static Regeneration) SSG를 점진적으로 수행 (유효기간, 갱신기간 등) C..