[Next.js/코딩애플] Next.js의 시작

Next.js의 독학을 시작하며, 주요한 내용을 기록하기 위해 블로그에 기록을 작성해보려고 합니다.

 

1. Next.js의 파일 구조

파일(폴더)명	내용
layout.js	page.js를 감싸는 파일	페이지 간 공유하는 UI (상단 메뉴바 등) 내용 작성
		layout.js의 {children}: page.js 들어가는 부분
page.js	메인 페이지 파일
page.module.css (____.module.css)	유일하게 한 페이지에 적용할 수 있는 css 파일
public	이미지, 폰트 파일 저장 폴더

 

2. JSX 사용 방법: React 버전 HTML

(1) return() 내 HTML 작성 시 평행하여 태그 작성 불가: only 1개 태그로 시작/종료 필수

(2) className 사용 (class 대신 className)

(3) HTML 내 변수 삽입 시 {중괄호} 사용

(4) style 속성 삽입 시 {{ 클래스명:속성 }}과 같이 중괄호 중첩하여 사용

 

3. 자동 라우팅 기능

Next.js는 app 폴더 내에 새로운 폴더를 생성하는 것만으로 라우팅이 가능합니다. 라우팅을 위한 단계는 아래와 같습니다.

(1) 폴더명으로 라우터 생성: app 폴더 내 폴더 생성 시, /폴더명 만으로 라우팅 가능

(2) 생성 폴더 내 page.js 파일 생성 및 화면에 보일 내용 작성

 

4. <Link> 태그

import Link from "next/link"
<Link></Link>

→ <a> 태그와 동일하나, 새 페이지 로드 시 필요한 일부만 업데이트하는 방식을 사용하여 더 빠른 사용자 경험 제공

 

데이터베이스를 통해 [array] 내 {object} 가져올 경우, <Link> 태그 내 href 속성 지정하는 방법

{중괄호} 내 상위 라우터 주소와 '+' 기호를 통해 URL 지정 가능
(예시) href={ '/상위 라우터 주소/' + array[index].key }

 

5. <Image> 태그

사용 방법
import Imgage from 'next/image'
<Image src={} />

장점
→ 최적화된 이미지 적용을 위한 방법

단점
→ 이미지마다 import 및 src 경로에 대입하여 사용 필수
→ 외부 이미지를 가져올 경우 width={}, height={} 지정 필수

 

6. Component

Component는 길고 복잡한 HTML을 한 단어로 축약하기 위해 사용하는 기능입니다.

 

아래와 같은 단계로 Component를 만들 수 있습니다.

1. function 함수명(){ } 생성
2. return문에 축약할 HTML 대입
3. <함수명 /> 사용

 

6-1. Server Component 

Next.js에는 두 가지 Component로 Server Component와 Client Component가 존재합니다.

그중에서도 Server Component는 일반적인 Component로, 큰 페이지를 작성할 때 주로 사용됩니다.

그러나 HTML 태그 내에 JS(자바 스크립트) 작성이 불가능하고, useState/useEffect를 사용할 수 없다는 단점이 존재합니다.

다만 로딩 속도가 빠르고, 검색 엔진 노출의 이점으로 자주 사용됩니다.

 

6-2.  Client Component

Client Component는 Server Component에서 사용이 불가했던 JS 기능 필요할 때 사용되는 Component입니다.

최상단에 'use client' 키워드 작성만으로도 전환 및 사용이 가능합니다.

다만, 자바 스크립트 사용과 *hydration으로 인해 로딩 속도가 느리다는 단점이 존재합니다.

*hydration

서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG) 방식을 사용해,
서버에서 생성된 초기 HTML에 클라이언트 측 JavaScript를 연결하여 동적인 기능을 활성화하는 과정

웹 페이지는 동적인 상호작용을 처리하면서, 초기 로딩 속도를 개선하고 검색 엔진 최적화(SEO)를 향상