Nextjs
1.[Next.js] 메타데이터
꼭 내보내야 하는 object 이다.작성한 내용은 브라우저의 헤드에 표시됨.메타데이터에 작성한 내용은 중첩됨페이지나 레이아웃만 메타 데이터를 내보낼 수 있다.탬플릿도 제공함
2.[Next.js] Next와 React는 뭐가 다를까?
React는 라이브러리 이지만 Next는 프레임워크 이다.라이브러리는 사용의 주체가 개발자 이지만, 프레임워크는 개발자가 규칙을 따르며 만들어야 한다.프레임워크는 주도하고, 개발자는 따라야 함.올바른 방법으로 올바른 위치에 파일을 넣어야 한다즉, 규칙을 준수하며 프로그
3.[Next.js] Next.js setup 하는 방법
폴더 생성 후 이동visual studio code 열기npm init -y, license MIT로 변경npm i react@latest next@latest reat-domscript 변경app폴더 안에 page 만들기NextJS는 실행시 app폴더 안의 page파
4.[Next.js] Next는 애플리케이션을 어떻게 렌더링 할까?
app/page.tsx 에 적힌 페이지로 /에 해당하게 됨만약 about-us 페이지를 만들고 싶다면?app/ 폴더 내에 about-us 폴더를 만들고 안에 UI를 제공 (page.tsx)반드시 해당 디렉토리 안에 꼭 생성 필요page를 만들지 않으면 경로가 노출되지
5.[Next.js] 동적 라우트 (Dynamic Routes)
Dynamic Routes 동적 라우트를 말함 /about-us 이런것들은 정적 라우팅이다. /movies/12321 ← 이런것들이 동적 라우팅이다 (영화번호 처럼 사용자가 입력한 숫자가 들어가는 형태) Next.js에서 동적 라우트 만드는 방법
6.[Next.js] Loading 페이지
업로드중..만약 API를 가져올때 너무 많은 시간이 소요된다면 페이지가 완성될때까지 사용자는 흰화면만 보게 됨이럴때는 Loading 페이지를 시각적으로 사용자에게 보여줘야함Loading페이지는 loading.tsx를 만들어주면 해결됨데이터를 가져오는 중이라면 먼저 lo
7.[Next.js] not found, Image, Link, redirect
경로상에 page가 없거나 설정한 경로가 아니면 not-found 파일에 정의한 내용이 나옴404페이지라고 보면 됨, 최상위 폴더에다 정의 해 주기not-found.tsx 혹은 not-found.jsx 파일에 페이지를 찾을 수 없을때 띄워줄 ui를 제공해주면 된다제공하
8.[Next.js] parallel route, default page, intercepting route
폴더명 앞에 @를 붙여 사용한 화면에서 여러개의 page를 동시에 보여주는 방법 중 하나layout시 {children}에 보여지는게 아닌 { 폴더명 } 에 보여지게 됨참고로 @를 붙인 폴더도 경로에 영향을 안준다 (group과 같음)page.tsx에 만들 내용이 없는
9.[Next.js] 서버 컴포넌트와 클라이언트 컴포넌트
useState, onClick 등을 사용하기 위해선 client 컴포넌트 여야 한다파일 최상단에 ‘use client’를 명시하면 자동으로 client component가 된다client component가 된다.use client라고 해서 SSR이 아닌것은 아니다,
10.[Next.js] private, useRouter, ActiveLink
업로드중..폴더명 앞에 \_를 붙이면 private 폴더가 되며 경로에 영향을 주지 않음private폴더는 단순 폴더 정리용이라고 보면 된다.클라이언트에서 라우팅 하는 라우터next/navigation에서 동작주소와 연동돼서 만약 주소와 일치하는 컴포넌트라면 해당 컴포
11.[Next.js] Context API, usePathname, useSearchParams, params
Provider.tsx 파일에서 context api 적용 가능client component에서만 사용 가능next/navigation의 메서드, 현재 경로를 가져와 줌쿼리스트링의 데이터를 가져와 줌기본적으로 prop으로 들어있음useSearchParams와 비슷, 기
12.[Next.js] Server Actions
Next14에 정식적으로 도입input 같은거 value, onChange 다 지워도 됨! 대신, 유효성 검사를 위해 각 input에다가 required 붙여주고 name 속성 다 붙여주기input들을 태그로 감싸고 action={submit}넣어주기Server Co
13.[Next.js] Client Component에서 Server Action 사용하기
업로드중..Server Component 처럼 그대로 쓰되 server action 부분을 별도의 ts파일로 분리해 작성하고, client component 내에서 import해 사용하면 됨
14.[Next.js] Next Auth와 Middleware
NextAuth와 middleware (페이지 접근 권한 제어)
15.[Next.js] Next에서 React Query 적용하기
npm i @tanstack/react-query@5 로 설치npm i @tanstack/react-query-devtools@5 -DRQProvider.tsx 작성Redux와의 차이?Redux → 컴포넌트간 데이터 공유! but 캐싱 약함..RQ → 데이터를 서버로부
16.[Next.js] 낙관적 업데이트(Optimistic Update) with react query
업로드중..좋아요 등을 할때 성공할 것이라고 예측하고 미리 처리해버리는 전략로딩 state가 없기 때문에 사용자 경험이 좋아짐
17.[Next.js] Next15 시작하기
Next15 Next.js의 15번째 주요 버전으로, 리액트 기반 SSR(서버 사이드 렌더링)과 SSG(정적 사이트 생성)를 더 현대적으로 제공한다. 무엇이 달라졌는가 App Router의 강화 app 디렉토리 구조가 정립되어 라우팅 기능이 더 직관적으로 변했다. 기
18.[Next.js] Next.js 16: 프런트엔드 개발의 새로운 표준, 제어권의 귀환
프론트엔드 생태계는 빠르다. 새로운 프레임워크와 라이브러리가 쏟아지고, 어제의 정석이 오늘의 레거시가 되기도 한다. Next.js 역시 강력한 기능만큼이나 복잡해진 캐싱 전략과 렌더링 모델은 때로는 개발자에게 편리함을, 때로는 의도치 않은 버그와 스트레스를 안겨주었다.
19.[Nextjs] 환경 변수(.env) 안전하게 관리하기
깃허브에 올라간 API Key는 더 이상 비밀이 아니다개발을 시작할 때 가장 흔히 하는 실수 중 하나가 API 키나 인증 토큰이 담긴 .env 파일을 그대로 GitHub에 올리는 것이다. 한 번 공개된 키는 삭제하더라도 커밋 히스토리에 남아 언제든 악용될 수 있다.오늘
20.[NextJS] Next.js의 데이터 페칭 전략(ISR vs SSR)
모든 페이지를 실시간으로 가져올 필요는 없다사용자가 웹사이트에 접속했을 때 느끼는 '속도'는 곧 서비스의 품질과 직결된다. Next.js는 이를 위해 다양한 렌더링 전략을 제공하지만, 상황에 맞지 않는 전략 선택은 오히려 서버 부하를 높이거나 불필요한 로딩 시간을 초래
21.[NextJS] Next.js의 image 최적화 원리
웹 성능의 80%는 이미지에서 결정된다웹사이트 로딩 속도를 늦추는 주범은 대부분 거대한 이미지 파일이다. 특히 의류 쇼핑 플랫폼처럼 고화질 이미지를 다량으로 보여줘야 하는 서비스에서 이미지 최적화는 선택이 아닌 필수다. 단순한 img 태그를 넘어 Next.js의 Ima