Next.JS

Project 생성 명령어

layout.tsx: root 페이지url은 app 아래에 폴더 이름으로 생성 가능public 폴더 아래에 넣고 '/'로 접근ex)

CRS에서 useState를 사용하면 개발자 도구에서 요청 url이 그대로 노출되기 때문에 보안적 문제 때문에 데이터베이스는 client가 아닌 server쪽에서 접근해야했다. (중간 매개체가 필요했다.)↔️ 하지만 최신 버전의 NextJS와 server compone

JS 파일처럼 import 하면, CSS가 적용된다.클래스 내부에 요소에 css를 적용하기 위해서는, 요소 앞에 반드시 클래스 명을 써 주어야 한다.styles라는 폴더 안에 모두 모아도 되고, component 양이 많다면 폴더별로 따로 구성해도 좋다.css 파일명은

id 폴더 내의 페이지에서 파라미터를 설정한 후 title을 설정한다.여기서 generateMetadata 함수는 fetching 할 수 있게하는 함수이다. 동적인 제목을 갖고 있는 페이지를 위해 존재한다. \-> Hoem의 page는 정적이지만, id page의 me

Link 태그에 prefetch 속성을 넣어주면 유저가 클릭하지 않더라도 NestJS가 미리 해당 페이지를 마치 클릭한 것처럼 로딩해 놓는다.따라서 유저가 실제로 해당 페이지로 접속할 때는 이미 로딩된 상태이므로 유저는 빠르게 페이지의 데이터를 확인할 수 있게 된다.

개발 중 저장되는 코드는 자동으로 새로고침 된다.NextJS에서는 app 폴더 하단에 폴더만 만들어주면 된다!app > page folder > page.tsx file여러 폴더가 중첩되면 url이 길어진다.style.jsx 를 사용함으로써 컴포넌트 내부에 해당 컴포넌

폴더 명: (movies) > id > page.tsx폴더 명: components > movie.tsx

Layout.tsx 는 매 페이지에 존재할 수 있다.main Layout.tsx다른페이지 Layout.tsx

main Metadata다른 Metadata 사용 예시들

TypeScript 사용이 처음이라 사용방법이 꽤나 어렵다,,,ㅍㅁㅍ

Attribute 가져와서 적용시키기