NextJS 독학 1차시

즐겨보는 유튜브 코딩애플님의 강의를 통해 시작하였다.

SSR, 유니버셜 렌더링이 중요해지는 요즘 나도 살아남기 위해 NextJS를 배워보기로 결심했다.

NextJS란?

NextJS는 Vercel이 개발한 node.js 기반 리액트 SSR 프레임워크이며, 현재 나이키, 틱톡, 트위치 등의 기업에서 사용되고 있다.

왜 NextJS가 사랑받는지, 어떻게 써먹으면 좋을지는 차차 알아가보자.

---

✅시작하기

NextJs는 node 18 이상 버젼을 요구한다.
설치되어 있지 않다면 node.js에서 LTS 버젼을 다운받자.

node 설치를 완료하였다면, 작업용 폴더를 하나 만들어준다.
그 후 shift + 우클릭 -> 여기에 Powershell 창 열기를 눌러준다.

이후 터미널에

npx create-next-app@latest

를 입력해준다.

이후 설정은 남자답게 선택해준다.
App Router 사용 -> Y만 잘 해주자.

만들어진 폴더를 코드 에디터에서 열어주자.

그러면 위와 같은 폴더 구조가 생성된다.

여기서 짚고 넘어갈 점이 있다.

✅앱 라우터

• layout.tsx : 레이아웃 페이지(메인 페이지를 감싸고 있다)
• page.tsx : 각 페이지의 메인 페이지. 리액트 기반 코드를 작성한다.

1. page는 layout에 항상 감싸져 있다.
   따라서 최상위 layout에 헤더를 정의하면, 다른 폴더의 page에는 항상 헤더가 들어가게 된다. 굿
2. NextJS는 폴더 기반으로 알아서 라우팅을 해준다.
   
   위와 같이 'app/cart' 폴더를 만들어두면,
   http://localhost:3000/cart와 같이 접속했을 때 cart 디렉토리 내에 있는 page.tsx가 보여지게 된다!
   이건 정말 편한 것 같다.
   
   당연히 폴더 내 폴더 구조를 통해 중첩 라우팅도 가능하다.
   http://localhost:3000/cart/payment 접속 시 payment 폴더의 page.tsx가 보이게 된다.

✅이미지 사용

image 태그를 사용할 수도 있지만, NextJS에서는 사이즈 최적화, 레이아웃 시프트, Lazy Loading를 위해 Image 태그를 지원한다.

import Image from "next/image";
import food0 from "/public/images/food0.png";

export default function List() {
  return (
    <div>
      <h4 className="title">상품목록</h4>     
          <Image src={food0} alt="food"/>
        </div>
      ))}
    </div>
  );
}

위와 같이 Image를 임포트하여 써먹도록 하자.

---

💎최종 목표

방학 동안 NextJS를 이용하여 개인 프로젝트를 하나 완성하고 싶다.
생각중인건 개인 블로그인데, 이후 더욱 구체화시켜야겠다.