다음 환경에서 작성하였습니다. - Ubuntu 20.04.4 LTS
노마드 코더 강의를 토대로 작성하였습니다.

개요

1. '라이브러리'와 '프레임워크'의 차이

'라이브러리'와 '프레임워크'의 차이점은 ? 많이 헷갈려한다.
라이브러리는 사용하고 코드를 호출하는것을 말하고, 프레임워크는 코드를 특정장소에 넣고 해당 '룰'에 따르기만 한다면 프레임워크가 우리가 쓴 코드를 호출 한다는 것이다.

next.js에서는 pages 폴더가 그 예시가 될 수 있다.

예를 들어 about 페이지를 만든다면 , about.js에서 어떤 컴포넌트를 about.js에 넣거나 혹은 우리가 "/about"으로 들어갈때 렌더링 된다. 이렇듯 단지 코드를 '올바른 장소'에 넣기만 한다면 모든게 "그냥 , 그냥 일어날 것이다." 보다시피 여기서 router 설정이라던가 그것을 렌더링 한다던가 설정을 하지 않았다. 그냥 next.js라는 프레임워크에서 자동적으로 발생한 것이다.

2. NextJs의 특징

next.js는 보통 react와 다르게 서버 사이드렌더링을 지원하는 것이다. 반대로 react는 클라이언트 사이드렌더링을 하여 앱을 만든다. 먼저 클라이언트 사이드렌더링은 유저가 보는 UI를 브라우저가 만드는 것을 의미한다. 클라이언트 사이드의 자바스크립트가 모든 UI를 만든다.

서버사이드 렌더링은 정적(static)으로 웹 페이지가 미리 생성이 된다.
Rehydration이라는 단계가 있는데, nextJs가 백엔드상에서 reactJs를 돌리고 있고 nextJs가 HTML페이지를 '사전생성'하고 유저가 웹사이트를 들어갈때 html을 보게된다. 하지만 유저가 모든 자바스크립트를 다운받게 되었을때 reactJs가 다시 주도권을 가져와서 모든게 일반적인 reactJs처럼 동작하게 만든다. nextJs는 그런 페이지를 '사전생성'해 준다.

또 jsx를 쓰고있다면 React.js를 import해올 필요가 없다. 그리고 모든 파일에 react를 import할 필요가 없다.

Next.js 설치와 실행

npx create-next-app@latest 혹은
typescript를 사용한다면,
npx create-next-app@latest --typescript Next.js 이렇게 최신버전을 설치할 수 있다.

1. 자주 실패했던 것들

노드 버전이 낮아서 설치도중 자꾸 에러가 났다. 캡쳐는 하진 못했지만 강의와는 다르게 바로 깔끔히 설치하진 못하였다. 이것은 node.js버전 문제로 node.js를 업데이트 함으로 해결가능한 문제이다.
node.js업데이트

2. npm start ?

분명 스크립트에 씌여있기론 다음과 같다

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

하지만 바로 npm start만 입력해선 실행이 되질않는다. npm run start 혹은 npm run dev 이렇듯 중간에 run을 넣어야 하며, npm run start를 입력하여 실행이 되질 않는 경우가 있는데 이럴땐 먼저 npm run build를 먼저 해줘야 한다.

3. 실행 포트 변경

아래는 -p를 입력하여 직접 포트번호를 변경할 수 있다.

  "scripts": {
    "dev": "next dev -p 1234",
    "build": "next build",
    "start": "next start"
  },

아래는 환경변수를 이용하여 포트번호를 변경할 수 있다. 또 , ${PORT-3000}을 넣어주면 환경변수가 없을경우, 3000번 포트로 실행이 된다.

  "scripts": {
    "dev": "next dev -p ${PORT}",
    "build": "next build",
    "start": "next start"
  },

참조 벨로그

pages

next.js의 가장 두드러진 특징중 하나이며 라우터 지정없이 next.js 프레임워크로 인해 해당 폴더안의 파일명이름의 url주소가 생긴다.

1. export default function

넥스트 js에선 export default function을 해놓지 않으면 에러가 발생한다. 그러니까,
default로 export를 해두지 않는다면 해당 페이지로 들어갈 수 없다.

그리고 해당 url 을 이용할 수 없다.

// import NavBar from "../components/navBar";

export default function Potato(){
 return (
   <div>
     {/* <NavBar /> */}
       <h1>About</h1>
   </div>
   )
 }

2. index.js

pages 폴더안의 index는 사실 components이다. 앱을 홈페이지와 연결시켜준다. 우린 index 페이지를 가지고 있지 않는다.

import Link from "next/link"

<a>태그를 사용할 경우 Eslint 오류메세지가 뜨는데 다음과 같다.

next.js에서는 <a> 태그보단 아래의 방법 사용을 권장한다.

import Link from "next/link";

export default function navBar(){
    return <nav>
        <Link href="/">
            <a>Home</a>
        </Link>
        <Link href="/about">
            <a>About</a>
        </Link>
    </nav>
}

<Link>를 사용하면 더 빠른 렌더링이 가능해진다. 하지만 <Link>에는 무언가를 전달할 수가 없다. (클래스, css) 내부에 <a>태그를 통해 원하는 것을 전달한다.

전역 style 설정하기

커스터마이징 하기 위해서는 _app.js 이 필요하며, 무조건 이름은 이것으로 정해야한다. 예를들어 'about'을 렌더링 하려할때, 먼저 _app.js을 보기 때문이다. 그리고나서 _app.js에 넣어둔 청사진을 기반으로 'about'을 렌딩한다. _app.js는 한마디로 '청사진'인 것이다.
어떤페이지가 있어야하는지, 어떤 컴포넌트가 어떤 페이지에 있어야만 하는지 중요하다.