728x90 반응형 nextjs3 NextJS의 기본 구성 app 폴더 안에 페이지를 구성한다. app이 곧 root. "/" 이다.폴더명은 경로이다.e.g : sub2의 최종 url은 "localhost:3000/FolderName/Folder/sub/sub2"가 된다.url에 표시되지 않는 폴더를 생성하고자 한다면 (폴더명) 형식으로 작성하면 된다. page.tsx 파일의 내용이 브라우저에 보여진다.해당 경로에 보일 내용의 파일명은 반드시 page로 해야한다.page 파일이 없으면 404 에러가 발생한다.layout.tsx 형제, 하위폴더들의 기본 레이아웃을 구성한다.{children} 이라고 적힌 부분에 형제, 하위폴더의 page.tsx 들이 삽입된다. (=== react의 children)loading.tsx 브라우저에 화면이 그려지기까지 시간이 걸릴 경.. 2024. 9. 4. Meta 태그 추가하기 React에서는 메타 태그 관리를 위해서는 Helmet 이라는 라이브러리를 추가로 받아서 사용해주거나, 다른 방법을 찾아야하지만 NextJS는 아래와 같은 코드를 메타태그가 필요한 페이지에 추가하여 관리할 수 있다. export const metadata = { title: "My First NextJS", description: "This is my first project with NextJS", keywords: "NextJS",}; ※ 타입스크립트의 경우 metadata 옆에 : Metadata를 추가export const metadata: Metadata = { title: "My First NextJS", description: "This is my first project wit.. 2024. 9. 2. NextJS 시작하기 NextJS란 공식 문서에 따르면, react 기능을 기반으로 한 Full Stack 프레임워크 입니다. React는 CSR(Client Side Rendering) 방식으로, 브라우저가 자바스크립트를 다운 받은 후 화면에 UI를 표시하기 때문에 자바스크립트가 동작하지 않는 환경에서는 화면이 표시되지 않습니다. 또한, 검색엔진과 같은 로봇들이 컨텐츠를 활용하지 못 해 검색엔진 최적화에 약하다는 단점이 있습니다. 그에 반해, NextJS는 SSR(Server Side Rendering) 방식으로, 서버 쪽에서 자바스크립트를 렌더링하고 완성된 HTML을 브라우저로 전송하기 때문에 자바스크립트가 동작하지 않는 환경에서도 화면이 잘 보여집니다. 이는 검색엔진 친화적이라는 의미이기도 합니다. 설치방법 1.1. 터.. 2024. 9. 1. 이전 1 다음 728x90 반응형
