공식 사이트 : https://nextjs.org/
- Vercel이 저작권과 소유권을 관리하고 있다.
참고 자료 : 위키백과 Next.js
클라이언트 사이드 렌더링인 React의 페이지 로딩 시간 문제, 검색 엔진에 친화적이지 않은 문제 등을 해결할 수 있는 프레임워크다.
- Template Engine의 클라이언트, 서버 사이드 렌더링 참고.
파일 시스템 기반 라우팅 : 파일의 경로가 주소에 매칭되는 라우팅 방식을 사용한다.
- 상세 내용은 라우팅 및 이동 설정 참고.
Next.js는 모든 페이지를 미리 렌더링(pre-rendering) 한다.
- Static generation : build time에 생성되는 HTML이며, 퍼포먼스 측면에서 서버 사이드 렌더링보다 권장하는 방식이다.
- 서버 사이드 렌더링(SSR 또는 다이나믹 렌더링) : 매 요청마다 생성되는 HTML이다.
- 참고 자료 : Next How to use Partial Prependering

Next.js 프로젝트 설정

Next.js 설치 참고 자료 : https://nextjs.org/docs/getting-started/installation

프로젝트를 설치하기 위한 폴더를 하나 만들고, Node.js가 설치되어 있지 않다면 Node.js를 설치한다.
- Nodejs 설치 참고.
VSC 터미널에 npx create-next-app 폴더경로로 대상 폴더에 설치한다.
"Ok to proceed?"가 나오면 y를 눌러 진행한다.
- Typescript 사용 여부(환경에 따라 설정)
- ESLint 사용 여부(명령문 문법 확인 - Yes)
- Tailwind CSS 사용 여부(Bootstrap 같은 CSS 프레임워크 - 환경에 따라 설정)
- src/ 디렉터리 사용 여부(환경에 따라 설정)
- App Router 사용 여부(아직 불안정하다는 이야기가 있어 No를 선택)
- import alias 사용 여부(Yes로 사용)

아래 사진은 실습 때 설정한 환경이다.

next 환경설정 1.png

설치가 완료되면 VSC 터미널에 npm run dev를 입력해 개발 모드로 서버를 실행하고, 웹 브라우저에서 URL에 localhost:3000으로 접속해서 테스트 화면을 확인한다.

프로젝트를 빌드할 때는 npm run build를 입력해 빌드를 진행하고, npm start를 입력해 빌드한 파일을 실행한다.

프로젝트 파일 및 폴더

pages : 출력할 내용을 작성하는 js 파일들을 저장하는 위치
- 파일의 경로가 라우팅에 매칭되기 때문에 라우팅을 설정할 파일은 반드시 pages 폴더에 만들어야 한다.
pages/api : api 파일들을 저장하는 위치
styles : css 파일을 저장하는 위치
- 일반 css 파일은 import '경로/파일이름';으로 적용하고, Module형태의 css 파일은 import styles from '경로/파일이름';으로 가져와서 css를 적용할 태그의 attribute에 className={styles.객체이름}으로 적용한다.
public : 이미지 파일 등을 저장하는 위치
다른 라이브러리 설정을 저장할 때는 lib 폴더를, React component를 저장한다면 component 폴더 등을 만들어서 사용할 수 있다.

next project.png

Home.module.css : 모듈형으로 만든 css 파일로, css를 적용할 js 파일에서 css를 import한 후, css 파일에서 만든 클래스 이름을 스타일 적용 대상 요소의 className에 넣으면 적용된다.
- 물론 이름은 이대로 사용하지 않고 원하는 이름으로 설정할 수 있다.

/* module로 내보낼 css */
.flower{color:pink;}

pages/index.js : 메인 화면 페이지로, "/"로 접근하면 가장 먼저 보이는 페이지다.
- React component 방식으로 작성하므로 React 사용법을 먼저 알아야 한다.
- 원래 있는 내용을 지우고 원하는 내용을 작성해서 사용한다.

// 최상위 경로는 설치 시 import alias 설정을 했다면 @로 쓸 수 있음
// module 형식 css는 import styles from '경로/파일이름'; 으로 import 한다
import styles from '@/styles/Home.module.css';

export default function Home() {
  return (
    <>
	    {/* CSS를 적용할 태그에 className에 styles.객체이름 으로 적용 */}
      <p className={styles.flower}>Test</p>
    </>
  );
}

pages/_app.js : 페이지를 초기화할 때 사용하는 App을 설정한 파일로, pages의 페이지에 접근하기 전에 거친다.
- 참고 자료 : Next Custom App
- 페이지 초기화 시 페이지 변환 사이의 공유된 레이아웃을 생성하고, 페이지에 추가적인 데이터를 주입한다.
  - 페이지 전체에 공통된 요소를 넣을 때 app.js 파일을 수정해서 적용할 수 있다.
- global css를 적용하는 위치다.
- ./pages/\_app.js를 작성하는 방식으로 App을 오버라이딩하여 customizing하거나, 파일을 직접 수정해서 customizing할 수 있다.
  - 참고자료 : jake seo dev's Next.js App app.js의 모든 것
- Component property는 활성화된 페이지로, 라우트로 이동할 때 Component는 새로운 페이지로 바뀐다.
- pageProps는 Next의 데이터 fetching methods 중 하나로 preloaded된 페이지의 초기 property를 가지고 있는 객체다.

import "@/styles/global.css";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

pages/_document.js : 페이지를 렌더할 때 사용되는 <html>과 <body> 태그를 업데이트하는 파일로, _app.js 파일 다음으로 실행된다.
- 참고 자료 : Next Custom Document, Chamming2's Next.js의 document와 app에 대하여
- _document.js는 서버에서만 렌더되기 때문에 onClick과 같은 이벤트 핸들러는 이 파일에서 사용할 수 없다.
- 페이지가 렌더되려면 <Html>, <Head/>, <Main/>, <NextScript/> 태그가 꼭 필요하다.
- <Main/> 외의 React component는 브라우저에 의해 초기화되지 않기 때문에 어플리케이션 로직이나 커스텀 css를 적용하면 안된다.
  - menu나 toolbar같은 모든 페이지에 공통된 component를 설정하고 싶다면 Layouts를 사용한다.
  - 참고 자료 : Next Layout Pattern

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}