Next.js 시작하기( INTRODUCTION)

짜스의 하루 ·2024년 7월 19일

Next.js

React 기반의 웹 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우트, 이미지 최적화 등 다양한 기능을 제공하여 React 애플리케이션 개발을 더 쉽고 효율적으로 만들어준다.

그럼, Next.js와 React.js의 차이점은 ?
우리가 쉽게 알고 있는 건 React.js는 라이브러리, Next.js는 프레임워크 이다.

프레임워크 : 프레임워크는 애플리케이션의 기본 구조를 제공하는 소프트웨어 플랫폼이다. 개발자는 프레임워크의 규칙과 구조를 따르며, 프레임워크가 제공하는 기능을 사용하여 애플리케이션을 개발하게 된다.

라이브러리 : 특정 기능이나 작업을 수행하기 위한 코드 집합이다. 라이브러리는 애플리케이션에서 필요한 기능을 모듈화하여 제공하게 된다.
---> 개발자는 라이브러리를 필요에 따라 호출하여 특정 작업을 수행하게 된다.

요약
프레임워크:

애플리케이션의 기본 구조와 규칙을 제공.
제어의 역전 원칙에 따라 프레임워크가 애플리케이션의 흐름을 제어.
많은 내장 기능과 규칙을 제공.
예: Next.js, Django

제어의 역전 (Inversion of Control, IoC)은 소프트웨어 디자인에서 중요한 개념으로, 프로그램의 제어 흐름을 개발자가 아닌 프레임워크나 컨테이너가 관리하도록 하는 원칙이다. 이 원칙은 개발자가 직접 애플리케이션의 흐름을 제어하는 대신, 프레임워크나 컨테이너가 그 흐름을 제어하고 개발자가 필요한 기능을 제공하는 방식으로 작동한다.

라이브러리:

특정 기능이나 작업을 수행하는 코드 집합.
제어의 역전이 없이 개발자가 필요에 따라 호출.
기능적인 모듈로서 필요한 부분만 선택적으로 사용.
예: React, Lodash

Next.js 실행하기

파일을 하나 생성한 뒤, vscode에서 열어본 뒤, 터미널에
npm install react@latest next@latest react-dom@latest를 입력하면 된다!

그럼 이렇게 설치가 된 것을 확인할 수 있고, Next.js의 개발 서버를 시작하기 위해 npm dev를 정의해주면 된다.

Next.js는 npm run dev를 실행하는 순간, app/page.tsx 파일을 찾아서 렌더링한다. (자동으로 Next.js는 프레임워크로써 app 폴더를 참조하게 된다)

app 폴더에 page.tsx를 간단하게 만들어 본 뒤, npm run dev를 실행해본 결과,

"너 타입스크립트 사용하려고 하는구나?" 하면서 타입스크립트에 관한 모듈을 설치해주었다..!
(Next.js는 TypeScript와 관련된 패키지들이 설치되어 있지 않다는 것을 인식하고, 필요한 패키지를 자동으로 설치해준다. )

그와 동시에 layout.tsx를 자동 설치가 되었다.

layout.tsx의 역할 :
레이아웃 정의: layout.tsx 파일은 애플리케이션의 기본 HTML 구조를 정의한다. 이 파일에 정의된 HTML 구조는 모든 페이지에서 공유하게 된다.

그럼 왜 자동생성이 된걸까? :

Next.js 프로젝트를 처음 설정할 때, 기본 레이아웃을 설정하기 위해 layout.tsx 파일이 자동으로 생성된다.
이 파일은 기본 레이아웃을 제공하며, 페이지 구성에 필요한 기본 HTML 구조를 설정해준다.

Next.js는 개발자에게 기본적인 설정을 제공하고, 개발자가 애플리케이션을 효율적으로 구성할 수 있도록 돕기 위해 layout.tsx 파일을 자동으로 생성을 도와준다.

Next.js에서 router 설정은 어떻게 ??

바로 폴더 생성 -> 폴더 안에 page.tsx 파일 존재
한다면, router가 자동 생성되고, 해당 router에 page.tsx를 보여주게 된다.

이게 무슨 말이냐..?
리액트에서는 react-router-dom로 '/home'에는 <Home/>컴포넌트 렌더링할거야 라고 지정해서 알려줬다면 <Route path="/home" element={<Home />} /> , Next.js에서는 정말 단순하게 폴더를 생성하고, 해당 폴더에서 렌더링 해야 될 페이지가 있다면, page.tsx를 만들면 된다..!

예를 들어, app/home/page.tsx 파일을 생성하면, http://localhost:3000/home URL에서 이 페이지를 렌더링한다.
app/about/page.tsx 파일을 생성하면, http://localhost:3000/about URL에서 이 page.tsx를 렌더링한다.

우리는 지금 http://localhost:3000/about-us 를 생성했다 그럼,
http://localhost:3000/about-us/company/sales를 렌더링하려면 어떻게 해야하냐!

이렇게
app > about-us > company > sales > page.tsx 파일을 생성하면 된다.
그럼 이렇게 sales 폴더에 작성한 page.tsx가 화면에 렌더링 되는 것을 확인할 수 있다.

Next.js에서는 파일 기반 라우팅을 통해 폴더와 파일 구조를 사용하여 라우트를 정의하게 된다.

Wow... 진짜 놀랍다

설명 요약

폴더 구조: app/about-us/company/sales/page.tsx 파일을 생성하여 URL 경로를 설정한다.
렌더링: 해당 URL에서 page.tsx 파일의 내용이 자동으로 렌더링된다.
Next.js: 파일 기반 라우팅을 통해 폴더 구조에 따라 라우트를 설정하고, 폴더에 있는 page.tsx 파일이 해당 URL에서 렌더링된다.

그럼, company도 폴더로 설정했으면, 화면에 나오나?
아니다. 404 오류 화면이 뜨는 것을 확인할 수 있다.

폴더만 생성이 되고, page.tsx 파일이 없다면, 단순히 경로로만 설정이 된다.

폴더 생성: : 폴더를 생성하는 것만으로도 해당 경로를 정의할 수 있다.
app/about-us/company 폴더를 생성하면, http://localhost:3000/about-us/company URL 경로가 자동으로 정의된다.

page.tsx 파일이 없는 경우: 해당 폴더 안에 page.tsx 파일이 없으면, Next.js는 빈 페이지를 렌더링한다.
사용자는 이 URL로 접근할 때, 페이지의 내용이 없거나, 페이지를 찾을 수 없다는 메시지가 표시된다.

Not-Found

만약, 잘못된 주소를 입력한다면 ?
--> 기존의 Next.js에서는 404라는 오류 페이지를 보여준다.

그럼 내가 Not Found!라는 파일을 만들어서 주소를 잘 못 입력했을 때, 보여줄 수 있을 까?
--> 가능하다!

app 파일 안에, not-found라는 폴더를 생성하고, 간단하게 "Not Found!" 라는 문구를 간단하게 보여주고 서버를 재시작 하면, 잘못 입력한 주소는 내가 작성한 not-found 폴더를 보여주게 된다.

usePathname()

이제 화면 상단에 navigation 바를 만들어볼 예정이다
(모든 화면에 공통적으로 추가되는 navigation 바를 의미한다. )

그럼 가장 가능은하지만, 권장되지 않는 방법을 사용해서 먼저 시도해보도록 하겠다

components > navigation.tsx 파일을 생성 후, navigation바를 만들어보자

navigation.tsx

import Link from 'next/link';

export default function Navigation () {
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link href="/">Home</Link>
          </li>
          <li>
            <Link href="/about-us">About Us</Link>
          </li>
        </ul>
      </nav>
    </>
  );
}

next에서 제공하는 Link태그를 사용해서, 페이지 간의 클라이언트 사이드 네비게이션을 구현해 보았다.

그리고 이<Navigation/>태그를 모든 폴더의 page.tsx에 불러와준다
요렇게! 하고 서버를 재시작 해보면,

요렇게 nav바가 생성된 것을 확인할 수 있다.

그럼, Home을 눌렀을 때-> 🏠 이모지를 옆에 붙여주고, About-Us를 눌렀을 때-> ⭐️ 이모지를 옆에 붙여주고 싶다 (즉, 어디로 이동했는지 알고 싶을 때!)

--> usePathname() 을 사용하면 된다!

Next.js에서 사용하는 훅 중 하나로, 현재 페이지의 경로명을 가져오는 데 사용된다. Next.js의 새로운 라우팅 시스템인 App Router(Next.js 13 이상)에서 사용할 수 있는 훅이다.

이렇게 usePathname() 을 path로 불러온 뒤, path가 / 일 경우, 🏠 이모지를, 아니면 null을, path가 /about-us일 경우, ⭐️이모지를 아니면 null을 반환한다.
를 명시해주고, 서버를 재시작해보면, 샬롸샬롸~~ 하다가
usePathname은 client component에서만 작동한다.
이로써, "use client"를 추가해야 한다는 문구를 띄우며 에러가 발생했다.
"use client"를 추가해서 다시 렌더링해보니,
이모지가 제대로 나타나는 것을 확인할 수 있다.

components 폴더에 navigation.tsx파일을 생성해 nav바를 만들었더니
--> 모든 page.tsx에 navigation.tsx 파일을 불러와야 한다
--> "use client"를 추가해야 했다. 왜?

next.js는 어떻게 application을 렌더링하는가?

--> next.js는 우리의 react components를 가져와서 브라우저가 이해할 수 있는 html 코드로 변환하는 작업을 의미한다.

만약, next.js의 프레임워크를 사용하지 않고, create-react-app만을 사용해서 어플리케이션을 렌더링한다면 ?

--> client side rendering을 의미한다.

Client side rendering이란?

클라이언트 사이드 렌더링(Client-Side Rendering, CSR) 은 웹 애플리케이션의 렌더링 방식 중 하나로, 클라이언트(브라우저)에서 HTML을 동적으로 생성하고 렌더링하는 방법이다.
--> CSR은 웹 애플리케이션의 동적인 사용자 경험을 제공하는 데 유용하며, 주로 자바스크립트 프레임워크와 라이브러리를 통해 구현된다

클라이언트 사이드 렌더링의 주요 특징

HTML 렌더링 위치: 클라이언트 사이드 렌더링에서는 HTML 콘텐츠가 서버가 아닌 브라우저에서 생성된다.
초기에는 빈 HTML 페이지가 서버에서 전달되며, 이후 자바스크립트가 로드되어 페이지를 동적으로 생성하게 된다.
만약, 데이터가 느리거나, 인터넷이 터지지 않는 곳에서 페이지를 로딩하게 되면, 빈 화면을 보는 시간이 길어지게 된다.

자바스크립트의 역할:

CSR에서는 자바스크립트가 페이지의 HTML 구조를 동적으로 생성하고 업데이트한다.
자바스크립트 프레임워크나 라이브러리(예: React, Vue.js, Angular)가 이를 담당하게 된다.

초기 로딩 시간:

초기 페이지 로딩 시, 빈 HTML 페이지와 자바스크립트 파일을 서버에서 받아온다.
자바스크립트가 다운로드되고 실행된 후에 페이지의 콘텐츠가 렌더링된다.
--> 이로 인해 초기 로딩 시간이 길어질 수 있다.

동적 사용자 경험:

CSR은 페이지가 동적으로 업데이트되고, 사용자와의 상호작용에 빠르게 반응할 수 있다.
페이지를 새로 고치지 않고도 콘텐츠를 업데이트하거나 다른 페이지로 이동할 수 있다.

SEO와 접근성:

클라이언트 사이드 렌더링은 초기 로딩 시 서버에서 HTML 콘텐츠를 제공하지 않기 때문에, 검색 엔진 최적화(SEO) 와 접근성 문제를 겪을 수 있다.
--> 구글과 같은 검색 엔진은 자바스크립트 실행을 지원하지만, 자바스크립트가 실행되지 않으면 콘텐츠를 인식하지 못할 수 있다.

결론: 클라이언트 사이드 렌더링에서는 자바스크립트가 HTML 구조를 동적으로 생성한다.
초기 로딩 시에는 빈 HTML 페이지가 서버에서 클라이언트로 전달되며, 자바스크립트가 다운로드되고 실행된 후에 브라우저에서 페이지의 콘텐츠가 동적으로 렌더링 된다.
--> 이로 인해 초기 로딩 시 빈 화면이 잠깐 표시될 수 있게 된다!

Server side rendering

next.js로 웹사이트에서 빌드할 때, 자동적으로 server side rendering이 된다.

서버 사이드 렌더링(Server-Side Rendering, SSR) 은 웹 애플리케이션의 렌더링 방식 중 하나로, 웹 페이지의 HTML 콘텐츠를 서버에서 생성하고 클라이언트에게 전달하는 방법이다.
SSR은 페이지가 서버에서 미리 렌더링되기 때문에 클라이언트는 완성된 HTML을 즉시 받아볼 수 있다.

서버 사이드 렌더링의 주요 특징

서버에서 HTML 생성: 서버 사이드 렌더링에서는 서버가 요청을 처리하고, HTML 콘텐츠를 완성한 후 클라이언트에게 전달한다. 클라이언트는 서버에서 전달된 완성된 HTML을 바로 렌더링한다.

초기 로딩 속도:

서버에서 미리 렌더링된 HTML을 클라이언트가 받기 때문에, 초기 페이지 로딩 시 빈 화면이 나타나는 것을 방지할 수 있다.
즉, 사용자가 페이지를 요청하면 서버가 완성된 페이지를 즉시 제공하므로 빠른 렌더링이 가능하다.

SEO 최적화:

서버 사이드 렌더링은 검색 엔진 크롤러가 서버에서 제공된 HTML을 쉽게 인식할 수 있도록 하므로, SEO(검색 엔진 최적화) 측면에서 유리하다.
--> 자바스크립트가 실행되기 전에도 페이지의 콘텐츠가 완성되어 있기 때문에 검색 엔진이 콘텐츠를 제대로 인덱싱할 수 있다.

서버 자원 소모:

서버 사이드 렌더링은 서버가 요청할 때마다 HTML을 동적으로 생성해야 하므로, 서버의 자원을 많이 소모할 수 있다. 특히 트래픽이 많은 사이트에서는 서버의 부하가 증가할 수 있다.

간단하게 요약하자면, 서버에서 페이지를 이미 렌더링하기 때문에, 클라이언트는 로딩 없이 페이지를 받아볼 수 있다.
(next.js는 서버 사이드 렌더링에 속한다)

페이지 소스코드를 살펴보면, 자바스크립트를 비롯한 페이지에 대한 모든 것들이 렌더링 되는 것을 확인할 수 있다!

Hydration

자, 만약 이렇게 버튼을 추가했다.

처음 화면에 로딩이 되면, 단순히
<button>0</button> 버튼만 로딩이 된다. 이 버튼은 onClick이벤트 리스너가 붙지 않은 단순한 버튼을 나탄내다.

클라이언트는 단순히 이 버튼을 HTML로써 보게 된다.

이후,클라이언트가 이 버튼을 본 후, 이후에 여기에 우리의 프레임워크를 로딩하고, onClick이벤트가 붙게 되면서, 버튼이 1씩 증가하게 된다. 이러한 과정이 hydration이다.

Hydration 과정 요약

서버에서 렌더링: 서버는 초기 HTML 페이지를 렌더링하여 클라이언트에 전달한다.
이 경우, <button>0</button>과 같은 HTML이 포함된다.
서버는 이 버튼의 초기 상태를 생성하여 클라이언트에게 제공한다.
클라이언트의 초기 렌더링: 클라이언트는 서버에서 받은 HTML을 사용하여 페이지를 렌더링한다. 이 단계에서 버튼은 클릭 이벤트 리스너가 붙지 않은 상태로 화면에 표시된다
프레임워크 로딩 및 Hydration : 클라이언트 측에서 자바스크립트 프레임워크(예: React)가 로딩되면, 자바스크립트가 페이지의 요소와 상호작용을 설정한다.
이 과정에서 프레임워크는 HTML의 상태를 기반으로 이벤트 리스너를 붙이고, 페이지의 상태를 동기화한다.
이 단계에서 버튼에 onClick 이벤트 리스너가 추가되고, 버튼 클릭 시 상태가 업데이트되도록 동작이 설정됩니다.
상호작용 가능: 이후, 클라이언트는 버튼 클릭 시 상태가 업데이트되고, 버튼이 1씩 증가하는 등의 동적 상호작용이 가능해진다.

Hydration의 핵심
서버사이드 렌더링(SSR)을 통해 만들어 진 인터랙티브 하지 않는 HTML을 클라이언트 측 자바스크립트를 사용하여 인터랙티브한 리액트 컴포넌트로 변환하는 과정을 말한다.
(서버 환경에서 이미 렌더링된 HTML에 React를 붙이는 것)

간단하게 설명하면

클라이언트가 화면을 로딩: 브라우저가 HTML 페이지를 받아서 렌더링
비활성 HTML 로딩: 초기에는 자바스크립트가 적용되지 않은 정적 HTML이 로딩
--> 이 상태에서는 버튼 등 요소가 클릭 가능하지 않거나 동작하지 않는다.
사용자는 비활성 HTML을 확인: 페이지를 처음 로드할 때는 정적 HTML을 보게 되며, 이때 버튼은 클릭해도 아무런 반응이 없다.
자바스크립트와 프레임워크 로딩: 이후, 자바스크립트 프레임워크(예: React)가 로드되어 활성화된다
액티브한 컴포넌트로 변환: 자바스크립트가 HTML에 이벤트 리스너를 추가하고, 인터랙티브 기능을 활성화하여 버튼 클릭 시 숫자가 증가하고, 네비게이션 링크가 클릭 시 페이지가 재로딩되지 않고 동적으로 이동할 수 있다.

이 과정 전체가 hydration이라 불리며, HTML 페이지가 처음에는 정적 상태로 로딩되지만 자바스크립트가 활성화되면서 동적 기능을 가지게 되는 것을 나타낸다.