Next.js
1.NEXT.js를 쓰는 이유
NEXT.js는 React 기반의 프레임워크풀스택 프레임 워크임.서버사이드 렌더링 : next.js는 서버사이드 렌더링을 지원하여 초기 페이지 로딩 속도를 향상시킨다.서버에서 페이지를 렌더링하여 최종 HTML을 클라이언트에게 쏴줌으로 초기 렌더링 시간이 줄어들고 SEO
2.next.js pages, layout, links, routes, loading, error handling
next.js에서 레이아웃과 페이지는 웹 애플리케이션의 구조와 뷰를 구성하는 데 사용된다.여러 페이지에서 공통으로 사용되는 구조를 정의하는 컴포넌트이다.사이트의 헤더, 푸터, 네비게이션 메뉴 등과 같은 요소를 포함. 일반적으로 프로젝트의 공통 디자인과 스타일을 적용하고
3.Cannot find module 'styles.module.css' or its corresponding type declarations.ts(2307) 에러 해결
소스코드로 내려받은 next.js 코드에 CSS부분에 Cannot find module 'styles.module.css' or its corresponding type declarations.ts(2307)이런 에러가 났다.next-env.d.ts파일이 .gitign
4.next.js에서 비동기적으로 데이터 가져오기 fetching Data
next.js에서 fetchData를 하는 방법 라우팅 경로를 정한다. 나는 /users로 정했고 user들의 정보를 가져올 것이기 때문에 users라는 폴더를 생성해서 그 안에 page.tsx만들어줌 그 후 app폴더와 같은 선상에 lib폴더(이건 자유일 듯.)를
5.다이나믹 라우팅 Params로 개별 유저 정보 가져오기
Next.js에서 다이나믹 라우팅(Dynamic Routing)은 동적으로 경로를 생성하고 처리하는 기능을 제공한다.동적인 URL 경로에 따라 페이지를 렌더링하고 데이터를 가져올 수 있다.다이나믹 라우팅은 주로 경로에 파라미터를 포함하여 사용되는데 파라미터는 URL경로
6.SSG / SSR / ISR과 Next.js 13버전의 fetch()
사전 렌더링(pre-rendering)을 통해 정적인 페이지를 생성하는 방식빌드시에 html에 데이터를 담아서 미리 파일을 만들고 접속자들에게 뿌리는 방법. 이미 만들어진 페이지를 여러 사람들에게 보여주는 것.서버 부담이 적고 응답 속도가 빠르다.마케팅 페이지나 블로그
7.next.js 13에서 SSG구현generateStaticParams
SSG를 구현하기 위해서는 예전 getStaticPaths 함수 같은 게 필요.Next.js 13 버전에서는 generateStaticParams 함수로 바뀌었다.chat GPT에는 13버전의 내용이 적용이 되지 않았는지 generateStaticParams 부분에 대
8.server components와 client components
Next.js 공식문서 참고.https://nextjs.org/docs/getting-started/react-essentialsNext.js 13 의 app 디렉토리 안에 있는 모든 컴포넌트들은 기본적으로 server component이다. 추가적인 작업없이
9.client components활용 - search bar 만들기
client components -위키피디아 API로 search 기능 만들어보기!!! Search.tsx 만들기 app폴더 안에 components 파일 만들어준다. Search.tsx 파일을 만들고 상단에 "use client"; 를 적어 클라이언트 컴포넌트로
10.Metadata 타입과 다이나믹 메타데이터(동적 메타데이터)
Metadata 타입 Next.js에서 사용되는 페이지의 메타데이터를 정의하는 인터페이스 *페이지의 타이틀, 설명, 키워드 등의 정보를 타입 안정성을 가지고 정의할 수 있다.* 일반적인 사용은 다음과 같다. metadata 상수는 Metadata 타입을 따르는
11.Unhandled Runtime Error Error: cookies is not iterable
집에서 사용하는 노트북에서는 아무 에러가 안나던 게 휴대용 노트북에서는 자꾸만 이런 에러를 나타내며 fetch의 결과값을 주지 않았다. 검색을 해도 내가 원하는 답이 나오지 않았고,몇번을 껐다 켜도 에러는 사라지지 않았다. 집에서 사용하는 노트북으로 다시 열었을 때 제
12.next.js이미지 넣기 방법
width height값을 안넣으면 에러남!리액트 이미지 불러오듯이 이렇게 불러오기도 가능! width height값을 안줘도 에러 안남 className으로 스타일줘서 크기 조절 할 수 있음!width height값을 넣어줘야하고 이렇게만 하면 에러가 남next.co
13.next.js + type script 커스텀 버튼 만들기
components 폴더에 CustomButton.tsx 생성 후 버튼의 구조를 잡아준다.next.js는 서버사이드 렌더링이 기본이기 때문에 브라우저의 상황에 따라 움직이는 button은 client side 렌더링이다. (onClick요소..)상단에 ‘use cl
14.next.js server action
next13.4에서 server action이라는 실험적 기능이 생겼다.사실 13버전 이전의 버전은 사용해본 적이 없기 때문에 어디가 더 나아진 건지 알지 못한다. 그냥 배울 뿐...ㅋserver action에 관한 내용이 많지 않아 100% 이해하진 못했다.한국어로
15.next.js client component로 데이터를 받아오면 왜 비효율적인가
next.js는 기본적으로 서버 컴포넌트로 동작한다.그렇다면 언제 서버컴포넌트 언제 클라이언트 컴포넌트를 사용하는가정보를 표현함에 있어 사용자와 상호작용이 필요 없다.정보만 전달하는 것이라면 서버컴포넌트가 유리하다.사용자와 상호작용하는 버튼, 검색창 등은 따로 클라이언
16.next.js cache
json-server를 이용해서 가짜 서버를 만들고, 게시물 추가 기능을 만들어봄.새 게시물은 상단 nav에 메뉴로 생김..게시물을 추가하면 json-sever로 만든 db.json에는 생성되어있는데 상단 nav에는 적용이 안됨... 새로 고침을 해도 적용이 안됨.바로