[노마드코더 - NextJS 시작하기] #1 Framework Overview

#0 Introduction

create project

npx create-next-app@latest
npx create-next-app@12 // 12 version으로 강의 진행하기 때문에

#1 Framework Overview

#1.0 Library vs Framework

framework는 정해진 틀과 규칙을 따라서 만드는 것
library는 내가 원할 때, 사용하고 싶을 때 사용하는 것

nextJs는 프레임워크!이다.

#1.1 Pages

/pages 안에서 'index.js'라는 파일을 만들어서 코드를 입력하면, / 페이지에서 컴포넌트를 불러온다.
/pages 안에서 'about.js'라는 파일을 만들어서 코드를 입력하면, /about 페이지에서 컴포넌트를 불러온다.

create react-app만을 한다면, React router Dom을 다운받아야 하고, 설정해야하고, router를 만들고 routes를 설계하고 compoonent를 import 해야하고 router를 render해야 한다.

nextJS는 이 과정이 필요 없다!!
파일 이름이 url이 되고, component명은 중요하지 않다. export default만 해주면 된다!

404 페이지 또한 자동으로 만들어준다.
JSX를 사용할 때 react를 import 해줄 필요가 없다.

#1.2 Static Pre Rendering

NextJS는 앱에 있는 페이지들이 미리 렌더링 된다. 정적(Static)으로 생성된다.

Client Side Rendering

'create react-app'
1.

만 HTML로 가져온다.
2. 브라우저가 react.js를 다운받고, 모든 javascript를 요청해서 다운받는다.
3. 브라우저가 javascript와 react.js를 실행시킨다.
3. react.js가 렌더링된 후에야 유저는 react app을 보게 되고, 상호작용이 가능하다.

• 브라우저가 javascript, react 등 모든 것을 fetch한 후에야 UI가 보인다.

• 브라우저가 자바스크립트를 가져와서 client-side의 자바스크립트가 모든 UI를 만드는 것이다.

• 인터넷 속도가 느린 경우, 브라우저는 비어있는 div만 가져와서 빈화면이 보이게 된다.

• 자바스크립트가 활성화되어있지 않은 경우, 태그만 확인 가능하다.

Server Side Rendering

'create next-app'
1. 페이지를 열면, HTML이 로딩된다.
2. 이후에 reactJS가 클라인트로 전송되었을 때, reactJS 앱이 된다.
(reactJS를 프론트엔드 안에서 실행하는 것을 hydration이라고 부른다.)

• 유저가 페이지를 요청하면 실제 HTML이 있다. 비어있지 않은! 진짜 HTML이 있다.
• nextJS가 미리 생성한다. 초기 상태로 pre-rendering한다.
• 인터넷 속도가 느리거나, 자바스크립트가 비활성화 되어있더라도 진짜 HTML을 얻게 된다.

nextJS는 reactJS를 백엔드에서 동작시켜서 초기 페이지를 미리 만든다. component들을 render시킨다. 렌더링이 끝났을 때 HTML이 되고, nextJS는 HTML을 페이지의 소스코드에 넣어준다.
그렇기 때문에, 유저는 javascript와 reactJS가 로딩되지 않았더라도 콘텐츠를 볼 수 있게 된다.
이후에 reactJS가 로딩되었을 때, 기본적으로 이미 존재하는 것들과 연결이 되어서 일반적인 reactJS앱이 된다.

장점!

• 유저가 코드를 다운받아 react를 실행시키길 기다리지 않아도 된다!
• 유저가 웹사이트에 가면, 초기 상태의 component로 된 미리 생성된 HTML 페이지를 보게 된다.
• 그리고 상호작용이 일어나면 reactJS는 그것을 받아서 아주! 잘! 작동한다!!
• 자바스크립트가 비활성화되면 reactJS가 로딩되지 않지만, 유저들은 앱의 초기 HTML을 볼 수 있다!
• SEO에도 좋다!

#1.3 Routing

NextJs 어플리케이션에서 anchor 태그를 네비게이팅하는 데 사용하면 안된다.
앱 내에서 페이지를 네비게이트할 때 사용해야만 하는 컴포넌트가 따로 있다.
anchor 태그를 사용하면 전체 어플리케이션이 새로고침된다.
client-side navigation이 없다는 뜻이다.

<a href="">Home</a>
<a href="/about">About</a>

대신 Link 태그를 사용한다.

import Link from "next/link";

// v12
<Link href="/">
	<a className="">Home</a>
</Link>


// v13 <Link>는 항상 <a>를 렌더링 하고 기본태그에 props를 전달할 수 있다.
<Link href="/about">
  About
</Link>

useRouter 훅을 사용할 것이다.

import Link from "next/link";
import { useRouter } from "next/router";

export default function NavBar() {
  const router = useRouter();
  return (
    <nav>
      <Link href="">
        <a style={{ color: router.pathname === "/" ? "red" : "blue" }}>Home</a>
      </Link>
      <Link href="/about">
        <a style={{ color: router.pathname === "/about" ? "red" : "blue" }}>
          About
        </a>
      </Link>
    </nav>
  );
}

#1.4 CSS Modules

xxx.module.css 파일에 css처럼 작성한다.
CSS Modules이라고 부르는데, 클래스에 텍스트로 적는 대신 javascript 오브젝트에서의 프로버티 형식으로 적는다.
브라우저에서 클래스 이름을 확인해보면 이름이 다르다. 페이지가 빌드될 때 NextJS가 클래스이름을 무작위로 바꿔준다. 클래스 이름의 충돌이 일어나지 않는다!
NextJS 컴포넌트 내에서 css를 import 하고 싶다면, module이어야 한다.

// NavBar.module.css
.link {
	text-decoration: none;
}

.active {
	color: tomato;
}

// NavBar.js
...
<Link href="/">
	<a className={`${styles.link} ${router.pathname === "/" ? styles.active : ""}`}>
    HOME
    </a>
</Link>
<Link href="/about">
	<a className={[styles.link, router.pathname === "/about" ? styles.active : ""].join(" ")}
</Link>
...

#1.5 Styles JSX

어플리케이션에 styles를 추가하는 또다른 방식
부모 컴포넌트가 사용하고 있더라도 상관없다.
JSX style은 해당 컴포넌트 내부로 범위가 한정된다.
props를 추가할 수 있다.

<style jsx>{`
	nav {
    	background-color: tomato;
    }
    a {
    	text-decoration: none;
    }
    .active {
    	color: ${props.color};
    }
`}</style>

#1.6 Custom App

NextJS로 작업할 때 페이지별로 생각해야 한다!
NextJs는 '_app.js'파일을 먼저 확인한다. 이후에 다른 컴포넌트를 렌더링한다.
_app.js 파일은 어떻게 페이지가 있어야 하는지, 어떤 컴포넌트가 어떤 페이지에 있어야만 하는지 알려준다.
css module이 아닌 global styles를 import 할 수 있다.

import NavBar from "../components/NavBar";
import "../styles/global.css";

export default function App({ Component, pageProps }) {
    return (
        <>
            <NavBar />
            <Component {...pageProps} />
            <style jsx global>{`
                a {
                    color: white;
                }
            `}
            </style>
        </>
    );
}

#1.7 Recap

hydration?
Hydration은 서버에서 생성된 HTML 마크업과 클라이언트 측 JavaScript를 연결하는 프로세스를 나타냅니다. 서버 측 렌더링을 통해 생성된 페이지의 초기 상태와 마크업이 클라이언트로 전송되며, 클라이언트는 이 정보를 사용하여 페이지의 초기 렌더링을 수행합니다.

rehydration?
Rehydration은 클라이언트에서 서버로부터 받은 초기 데이터를 사용하여 페이지를 다시 생성하는 프로세스를 나타냅니다. 이 초기 데이터는 페이지의 초기 상태와 일치하며, 클라이언트 측 JavaScript가 페이지를 다시 렌더링할 때 사용됩니다. 이를 통해 초기 페이지 로드 후에도 사용자에게 부드러운 경험을 제공할 수 있습니다.