본문 바로가기

Next.js139

[Next.js 13] head 태그 - title 및 meta 데이터 추가/수정 방법(Metadata API) # Next.js 13 - 메타 데이터 추가/수정 방법 (Metadata API) 검색최적화(SEO)를 위해서는 HTML페이지의 태그에 메타 데이터를 잘 정의해주어야 한다. 그러나 직접 루트 레이아웃(`/app/layout.js`) 파일의 html 태그에 head 태그를 삽입하고 수정해서는 안 된다. 공식 문서에도 다음과 같이 쓰여있다. (not에 볼드체 처리가 되어 있다.) "You should not manually add tags such as and to root layouts. Instead, you should use the Metadata API." 따라서 Next.js가 제공하는 MetaData API를 이용해 meta data를 추가 정의해야 한다. MetaData API를 이용하면 Ne.. 2023. 8. 29.
[Next.js 13] layout.js: 레이아웃 기본 정리 # Next.js 13 - 레이아웃(layout.js)란? Next.js 13부터 도입된 layout.js 파일은 여러 페이지(page.js) 들에 공통적으로 적용되는 UI를 정의하는 컴포넌트이다. layout.js는 하위의 page.js 및 layout.js 를 자식(children)으로 감싸서 화면을 렌더링 한다. 따라서 여러 레이아웃을 만들어 두고, 부모-자식 레이아웃 구조로 중첩하여 적용하는 방식도 가능하다. 또한 레이아웃(Layout)에 정의된 UI와 상태 값들은, (경로 이동-Navigation 등이 발생하더라도) 계속해서 유지되며 재렌더링 되지 않고 재활용된다. # layout.js(레이아웃) 정의 방법 layout.js 를 정의하는 방법은 다음과 같다. /app 디렉터리, 혹은 그 내부의 .. 2023. 8. 29.
[Next.js 13] page.js : 페이지 컴포넌트 기본 정리 # Next.js13 - Page.js 컴포넌트란? page.js 는 Next.js에서 App Router를 위해 제공하는 React 컴포넌트 파일이다. 따라서 파일명을 바꾸면 안된다. 타입스크립트의 .tsx는 가능하다. page.js 컴포넌트는 크게 아래의 두 가지 역할을 수행한다. Routable 브라우저에서 접속 가능하게 만든다. page.js 파일이 속해있는 폴더명을 브라우저에서 접속 할 수 있는 경로(url segment)로 만든다. UI 현재 접속한 화면의 UI를 만든다. 결과적으로 JSX를 리턴하는 React 컴포넌트이다. # Page.js 사용 방법 (라우트 정의) page.js 를 통해 라우트(접속 경로 및 화면 UI)를 정의하는 방법은 다음과 같다. /app 디렉터리 내부에 폴더를 만든.. 2023. 8. 29.
[Next.js 13] 라우팅 정의 방법 (Defining Routes) # Next.js 13 라우팅 정의 방법 Next.js 13은 파일 시스템 기반의 라우터를 사용한다. /app 디렉토리 내부에 폴더를 만들면, 각 폴더명은 라우팅 경로(Route Segement)가 된다. 폴더 내부에 또 다른 폴더를 만들면, 중첩 라우팅 경로(Nested Route)가 된다. cf. 라우트/라우팅 용어 "라우트"는 사실 영어로는 Route이며, 일반적으로 "루트"로 읽고, "경로"를 의미한다. 하지만, Next.js 에서는 Route는 "라우트", Routing은 "라우팅", Router는 "라우터"으로 읽는듯하여 그대로 표기하였다. 즉, 라우트 === 루트(접속 경로) 와 같은 의미이다. # 라우트 만들기 (Creating Routes) Route를 만드는 방법은 다음과 같다. /ap.. 2023. 8. 23.
[Next.js 13] 라우팅 기본 정리 (Routing fundamental) # Next.js 13의 라우팅 기본 모든 웹사이트의 뼈대는 사실상 여러 페이지로 구성된 라우팅 구조이다. 라우팅이란 구분된 경로를 통해 각 페이지에 접근하는 방식을 의미한다. 예를 들면, http://localhost:3000/board 의 /board 등, 브라우저 등에서 접속 가능한 경로 시스템이다. cf. 라우트/라우팅 용어 "라우트"는 사실 영어로는 Route이며, 일반적으로 "루트"로 읽고, "경로"를 의미한다. 하지만, Next.js 에서는 Route는 "라우트", Routing은 "라우팅", Router는 "라우터"으로 읽는듯하여 그대로 표기하였다. 즉, 라우트 === 루트(접속 경로) 와 같은 의미이다. # File-System Based Router Next.js 13은 `/app` 디.. 2023. 8. 23.
[Next.js 13] 프로젝트 폴더/파일 구조 이해하기 # Next.js 13 프로젝트 (폴더/파일) 구조 Next.js 13 프로젝트를 설치하면, 기본적으로 아래와 같은 프로젝트 구조를 갖게 된다. 최상위 루트 폴더 /app 폴더 /public 폴더 /src 폴더(Optional) /.next 폴더 /node_modules 폴더 최상위 루트 파일 Next.js 설정 파일들 next.config.js 파일 .next-env.d.ts 파일 .env 파일 그외 환경 설정 파일들 package.json 파일 .gitignore 파일 tsconfig.json 파일 .eslintrc.json 파일 [ VS Code 상에서 본 프로젝트 구조 ] # Next.js 13 폴더/파일의 구조 및 역할 각 폴더와 파일의 역할에 대해서 간단하게 살펴보면 다음과 같다. 1. 최상위.. 2023. 8. 19.
[Next.js 13] import alias @ 설정/추가/수정/삭제 방법 # Next.js 13 - import alias 란? import alias 란 import 할 때마다 매번 복잡한 경로를 입력할 필요 없이, 공통되는 부분은 @로 치환하여 사용하는 방법을 의미한다. import Header from "@/components/common/Header"; export default function BoardPage() { return ( BoardPage ); } 만약 import alias 없다면, 매번 import 할때마다 "../../components/common/.." 등의 복잡한 경로를 작성해주어야 한다. import Header from "../../components/common/Header"; export default function BoardPage(.. 2023. 8. 19.
[Next.js 13] 설치, 빌드, 서버 구동 방법 (개발 모드/프로덕션 모드) # Next.js 13 설치 방법 기본적으로 Node.js 16.8 이상이 설치된 상태에서 진행해야 한다. (node.js 공식 홈페이지에 방문하여 OS에 맞는 설치파일을 다운로드 받아서 설치하면 된다.) 1. 설치 `create-next-app` 명령어를 사용하여 Next.js를 설치하면, 관련 설정까지 자동으로 세팅된다. 터미널에서 상에서 원하는 경로로 이동 후, 아래 명령어를 실행한다. npx create-next-app@latest 만약 현재 경로 상에 설치하려면, 명령어 뒤에 마침표( . )를 하나 붙여준다. npx create-next-app@latest . 2. 세팅 설치를 시작하면 터미널 상에서 몇가지 질문을 받게 된다. 프로젝트 이름, 사용할 라이브러리, 추가 설정에 관한 것으로 추천하는.. 2023. 8. 18.
[Next.js 13] Next.js란? 주요 기능과 역할 # Next.js란 Next.js는 React로 웹 서비스를 구축할 수 있는 풀스택 프레임워크이다. 구체적으로 Next.js는 다음과 같은 역할을 수행할 수 있다. Front-End Server: 브라우저의 요청을 받으면, React로 렌더링한 HTML페이지를 응답한다. API Server: 클라이언트의 API 콜을 받아서 JSON등을 응답한다. Back-End Server: Node.js 환경에서 구동되므로, 데이터 베이스 연동, 파일시스템 접근 등이 가능하다. 이 외에도 복잡한 번들링, 컴파일 등의 설정 작업을 Next.js 에서 기본적으로 제공해주기 때문에, 개발자는 좀더 웹 개발에만 집중할 수 있게 되어 아주 유용하다. (+성능 또한 좋다) 한마디로 Node.js의 Express와 유사한 프레임워.. 2023. 8. 18.

티스토리툴바