Next.js 기본-1

기본 세팅

npx create-next-app

package.json에서 next.js 12버전으로 변경후
:: 이렇게 하는 이유는 npx create-next-app@12 이렇게 설치를 해도 13버전이 깔려서 package.json을 건드려서 12버전으로 설치했다.

 "dependencies": {
    "next": "12.3.4",
    "react": "18.2.0",
    "react-dom": "18.2.0"
 },

npm i
npm run dev

---

Library vs Framework(Inversion of Control: 통제의 역전)

Library - 우리가 사용하는 것 : 우리가 Library을 호출하고 사용한다.
Framework - Framework가 나의 코드를 호출하는 것

---

Pages

pages 폴더 안에 있는 파일명에 따라 route(Url)가 결정된다.

// ex> pages에 about.js생성
	→ localhost:3000/about

component의 이름은 중요하지 않지만 export default 해줘야한다.

---

Next.js장점

페이지들이 미리 렌더링 된다.

next.js는 react.js를 백엔드에서 동작시켜서 페이지를 미리 만든다.
↓
이것이 component들을 render시킨다.
↓
Rendering이 끝나면 그건 HTML이 된다.
↓
next.js는 이 HTML을 페이지의 소스코드에 넣어준다.
↓
⭐️ 유저는 자바스크립트와 react.js가 로딩되지 않더라도 콘텐츠를 볼 수 있게 된다.

SSR(Server Side Rendering)_Pre Rendering

• 첫 페이지의 로딩이 빠르다.

유저가 웹 페이지에 접속.
↓
서버는 해당 페이지에 필요한 데이터를 가져와서 완전한 HTML 페이지를 생성.
↓
서버가 생성한 완전한 HTML 페이지를 클라이언트에게 전달.
↓
클라이언트는 해당 HTML 페이지를 브라우저에 표시하면서 추가적인 자바스크립트 파일을 다운로드.
↓
이후, 클라이언트 측에서 자바스크립트가 실행되면서 페이지는 동적으로 동작하며 상호 작용 가능해짐.

---

SPR(Static Pre Rendering)

Next.js의 SSG(Static Site Generation)과 함께 사용된다.
앱에 있는 페이지들이 미리 렌더링된다.(이것들은 정적으로 생성된다.)

SSG(Static Site Generation)_Pre Rendering

• 회사 소개 페이지 같은 정적 페이지는 모든 유저에게 동일한 화면을 보이기 때문에 한번만 생성하고 어딘가에 저장해두고 필요할 때마다 로드해서 사용한다

Next.js는 빌드 단계에서 프로젝트의 각 페이지를 미리 렌더링하고 해당 페이지들을 정적인 HTML 파일로 생성

빌드된 결과물은 클라이언트에게 정적인 HTML 파일로 제공되기 때문에, 서버 측의 추가적인 처리 없이 바로 클라이언트에게 전달.

클라이언트가 웹 페이지에 접속하면 이미 완전한 HTML 페이지가 제공되므로 초기 로딩 속도가 빠르고 사용자 경험이 향상.

---

React - CSR(Client Side Rendering)
: 브라우저가 유저가 보는 UI를 만드는 모든 것을 한다.

브라우저가 HTML을 가져올 때 비어있는 div로 가져온다는 것을 의미.
↓
그 후에 브라우저가 자바스크립트를 가져오고, 브라우저가 자바스크립트와 react.js을 실행시킨다.
↓
앱이 유저에게 보이게 된다.

비어있는 <div>가져옴 → Javascript, React 실행 → 유저한테 보여줌.

---

Hydration

Hydration은 클라이언트가 이전에 서버 또는 빌드 타임에 렌더링된 정적 HTML 페이지를 가져와서, 그 안에 존재하는 React 컴포넌트를 인식하고 실행하는 과정.

Next.js에서 hydration은 서버에서 렌더링 된 HTML, CSS 및 JavaScript와 같은 정적 콘텐츠를 가져와
클라이언트 측 JavaScript를 사용하여 동적으로 변환하는 과정을 의미한다.

이는 React의 기본 기능 중 하나로서, 서버 측에서 생성 된 HTML 마크업과 클라이언트 측 JavaScript를 결합하여
빠른 초기 로딩 속도와 동적 상호 작용을 가능하게 한다.

즉, 사용자가 페이지를 열면 Next.js는 서버에서 HTML과 함께 전송된 JavaScript를 실행하여 초기 페이지 로드를 빠르게 한다.

그 후에는 JavaScript를 사용하여 동적으로 페이지를 업데이트 한다.

이렇게 함으로써 사용자가 페이지를 더 빠르게 로드하고 상호 작용할 수 있다.

---

Routing

Next.js에서도 동일하게 Link태그를 써야한다. <a>태그는 전체 페이지를 다시 로딩한다.

useRouter()
앱의 함수 컴포넌트에서 router객체 내부에 접근하려면 userRouter()훅을 사용할 수 있습니다.

next.js 12버전

<Link href="/">
	<a style={{color: router.pathname === "/" ? "red":"blue"}}>
		Hello
	</a>
<Link>

next.js 13버전 [ a태그를 아예 쓰지 않고 Link태그로만 한다]

      <Link className={router.pathname === "/" ? "white" : "blue"} href="/">
        Home
      </Link>
      <Link className={router.pathname === "/about" ? "active" : ""} 
	      href="/about">
        About
      </Link>

---

Styles JSX : 컴포넌트에 한정되어 적용됨(scope)

export default function Navbar() {
  const router = useRouter();
  return (
    <nav>
      <Link href="/">
        <a className={ router.pathname === "/" ? "active" : "unactive"}>Home</a>
      </Link>
      <br/>
      <Link href="/about">
        <a className={router.pathname === "/about" ? "active" : 
	        "unactive"}>About</a>
      </Link>
      <style jsx>{`
        nav {
          background-color: dodgerblue;
        }
        a {
          text-decoration: none;
        }
        .active {
          color: white;
        }
        .unactive {
          color: red;
        }
      `}</style>
    </nav>
  );
}

---

Custom App

_app.js 파일을 만들어야 한다.(base template)
기본형태
export default function App({Component, pageProps}){
	return <Component {...pageProps} />
}

Next.js 다른 페이지들이 렌더링 되기 전에 app(_app.js)을 먼저 본다.
기본값 정도로 생각하면 편할 것 같다.

Component : 현재 페이지의 컴포넌트
pageProps : 해당 페이지의 초기 속성 값이 담긴 객체

• Next.js에서는 _app.js 이 아닌 다른 파일에서는 global styles(global.css)을 import 할 수 없다.
  → module.css로 해야함