[노마드 코더] NextJs 시작하기(1)

NextJS 시작하기 – 노마드 코더 Nomad Coders

 

 

#1 FRAMEWORK OVERVIEW

#1.0 Libray vs Framework (프레임워크와 라이브러리의 차이)

• 프레임워크는 정해진 규칙이 있다. 따라서, 적절한 곳에 코드를 작성해야 한다.
• 프레임워크는 추상화(코드가 감춰져 있는 형태)가 되어 있다.
• 프레임워크는 코드를 작성하면 작성한 코드가 감춰진 코드를 부르는 형태이다
• 라이브러리는 코드를 작성할 때 도움을 준다. 사용하고 싶을 때 추가하여 사용할 수 있다.

-> 리액트 앱은 index.tsx의 ReactDOM.render 코드를 작성해 앱을 랜더링하는데, next.js를 사용할 경우 page 폴더에 js 파일을 작성만 해 주면 추상화된 코드가 이를 자동적으로 해 준다.

 

 

#1.1 Pages (pages 폴더에 대하여)

• 프로젝트의 파일을 추가하려면 page 폴더에 js 파일을 생성하면 되는데, 이때 생성한 이름이 페이지 url 이름이 된다. 컴포넌트 이름은 상관이 없다.
• export default 코드를 작성하지 않는다면 에러가 발생한다.

• url 명에 해당하는 파일명이 없다면 404 에러 페이지가 나온다. -> 개발자가 설정하지 않아도 제공.

• 파일명 index는 기본 페이지가 된다. 따라서, /index를 검색할 경우 404 페이지가 띄워진다.
• 파일이 jsx가 아니어도 React.js를 import할 필요가 없다. 물론, 리액트 메소드를 사용할 경우에는 import 해야 한다.

 

#1.2 Static Pre Rendering (화면 렌더링)

• create react app은 CSR(client-side rendering)를 하는 앱을 만든다.
• client-side rendering란 브라우저가 HTML을 가져올 때 비어 있는 div 태그를 반환한다는 것. 네트워크를 느리게 설정하여 사이트를 접속하면 흰 화면이 먼저 보여지며, 해당 순간 브라우저는 자바 스크립트 코드를 요청한다.
• 이후, js및 리액트가 동작하며 데이터를 주고받아 렌더링해야 화면이 보여진다.
• 즉, 초기 구동 속도가 느리다.
• noscript 코드가 따로 있기도 하다.

• next.js는 앱에 있는 페이지들이 HTML로 사전 생성(pre-generate)되며, 정적(static)으로 생성된다.
• next.js가 구동되는 웹 사이트의 소스 코드를 보면 비어있는 HTML이 아닌 실제 작성한 HTML 코드가 보인다.
• 연결이 느리거나, 자바스크립트가 비활성화되어 있어도 유저가 HTML을 볼 수 있다.
• 이후, react.js가 랜더링된다.
• "HTML과 JS를 매칭시켜 동적 웹사이트를 브라우저에 렌더링하는 것"을 hydration이라고 한다. next.js는 hydration를 지원한다.

 

 

 

#1.3 Routing (네비게이션)

• next.js에서는 네비게이트할 때 사용하는 Link 컴포넌트가 있다.
• a href 형태로 구현하면 페이지 이동 시 전체 애플리케이션이 새로고침된다. 
• Link를 사용할 경우 새로고침 없이 빠르게 페이지 이동이 된다.
• Link 태그 내 className 지정이나 style 지정 등도 가능하게 업데이트 되었다.

네비게이션 컴포넌트 예시 코드(home, about 이동)

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

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

 

 

#1.4 CSS Module

• 확장자를 .module.css로 하여, 기존 css 파일 작성 방법으로 작성하면 된다.
• 클래스 이름을 중복 걱정 없이 재사용할 수 있다.
• 파일을 새로 생성해 css를 작성해야 한다는 단점이 있다.

#1.5 Styles JSX

• 클래스 이름을 지정하지 않고, 태그를 그대로 사용해도 된다.
• 부모 컴포넌트가 그 클래스 이름을 사용하고 있어도 상관이 없다.
• jsx 스타일은 컴포넌트 내부로 범위가 한정된다.
• 내부에서 props를 가져오는 것도 가능하다.

jsx 스타일 예시 코드

    <nav>
      <Link className={router.pathname === "/" ? "active" : ""} href={"/"}>Home</Link>
      <Link className={router.pathname === "/about" ? "active" : ""} href={"/about"}>About</Link>
      <style jsx global>{`
        nav {
          background-color: tomato;
        }
        a {
          text-decoration: none;
        }
        .active {
          color: yellow;
        }
      `}</style>
    </nav>

 

 

#1.6 Custom App

• nextjs는 하나의 큰 애플리케이션이 아니라 각각의 나뉘어진 페이지를 고려해야 한다.
• 전역으로 스타일 지정을 하기 위해서는 모든 파일을 어우르는 파일을 만들어 줘야 한다.
• 기존에는 pages/_app.js 파일을 생성했으나, next.js 13부터는 app/layout.js 파일을 만드는 방식을 주로 사용한다고 한다.
• nextjs는 특정 파일을 렌더링 하기 전, _app.js를 먼저 확인한다.
• global.css는 _app.js 외에는 import가 불가능하다.

_app.js

import NavBar from "@/components/NavBar";
import "../styles/globals.css";

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

 

 

 

 

 

 

 

참고

https://velog.io/@haileyself/SPA-Client-Side-Rendering-%EA%B7%B8%EB%A6%AC%EA%B3%A0-Server-Side-Rendering-90k4ar8is1

SPA / Client Side Rendering 그리고 Server Side Rendering

https://velog.io/@huurray/React-Hydration-%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC

React의 Hydration에 대하여

https://velog.io/@yoosion030/Next.js-13-%EC%A0%95%EB%A6%AC

Next.js 13 정리