[Next.js] - react 기반의 풀스택 프레임워크!! 배워봅시당

https://opentutorials.org/course/5098

Next.js 13 - 생활코딩

Next.js란?

Next.js는 React 기반의 풀스택 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하며, 최신 웹 애플리케이션을 개발하는 데 최적화된 도구이다.

 

프론트부분은 react와 같고 백엔드부분은 expressjs랑 비슷한 기능들이 탑재되어 있다고 한다.

Next.js의 주요 특징

1. 서버 사이드 렌더링(SSR, Server-Side Rendering) (기본적으로 지원함)
   • 페이지를 서버에서 미리 렌더링해서 클라이언트에 전달함
   • 결과적으로 초기 로딩 속도가 빠르고, SEO(검색 엔진 최적화)에 유리함
   • async function getServerSideProps()를 사용하여 구현
2. 정적 사이트 생성(SSG, Static Site Generation)
   • 빌드 시 HTML을 미리 생성해서 배포
   • 페이지 로딩이 매우 빠름
   • async function getStaticProps()를 사용하여 구현
3. 클라이언트 사이드 렌더링(CSR, Client-Side Rendering)
   • 기존 React처럼 브라우저에서 데이터를 가져와 화면을 렌더링
   • useEffect + fetch를 이용하여 구현
4. App Router (app 디렉토리 기반의 새로운 라우팅 시스템)
   • Next.js 13부터 적용된 방식
   • 폴더와 파일명으로 라우팅을 자동으로 구성 (app/page.tsx → / 경로)
   • 서버 컴포넌트와 클라이언트 컴포넌트를 구분해서 성능 최적화
5. API Routes (백엔드 기능 지원)
   • Next.js 내부에서 API 서버 역할을 할 수 있음
   • /api 디렉토리 안에 함수를 만들면 백엔드 API가 됨
6. 인증 & 보안 (NextAuth.js 지원)
   • 소셜 로그인(OAuth), JWT, 이메일 로그인 등 쉽게 구현 가능

 

처음에 create-next-app 해서 샘플앱을 깔끔하게 정리하기!!

npx create-next-app@latest .

여기서 layout.tsx 의 children은 page.tsx 를 의미한다. ( 난 타입스크립트로 설정함 )

=> layout.tsx와 page.tsx의 이름을 마음대로 바꾸면 안 됨

page.tsx	해당 경로(/)의 메인 페이지를 정의
layout.tsx	해당 폴더의 모든 페이지에 공통으로 적용되는 레이아웃을 정의

 

Next.js는 app 폴더 안에서 파일명 기준으로 자동 라우팅을 설정.

• page.tsx → 페이지 컴포넌트로 자동 인식됨
• layout.tsx → 공통 레이아웃으로 자동 인식됨

 

예를 들어, page.tsx를 home.tsx로 바꾼다면?
➡ Next.js는 이 파일을 페이지로 인식하지 못해서 / 경로에서 실행되지 않음! 

 

.ts와 .tsx의 차이는?

.ts	TypeScript 파일	순수 TypeScript 코드 (React JSX 사용 X)
.tsx	TypeScript + JSX 파일	TypeScript + React JSX 사용 가능

 

.ts (TypeScript 파일)

• 일반적인 TypeScript 코드 작성
• React 컴포넌트가 아니라, 함수, 클래스, 유틸리티 코드 등에 사용됨
• JSX 문법 사용 불가능

function add(a: number, b: number): number {
  return a + b;
}
console.log(add(2, 3));

 

.tsx (TypeScript + JSX 파일)

• TypeScript 문법을 사용하면서 JSX(React 컴포넌트)도 작성 가능
• React 컴포넌트 파일은 .tsx를 사용해야 함
• JSX(JavaScript XML)는 JavaScript 안에서 HTML처럼 보이는 코드를 작성할 수 있도록 도와주는 문법임. React에서 UI를 만들 때 JSX를 사용하면 코드가 더 직관적이고 가독성이 좋아진다

import React from "react";

type Props = {
  name: string;
};

const ExampleComponent: React.FC<Props> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default ExampleComponent;

 

 

• React 컴포넌트 파일이면 .tsx
• JSX 없이 TypeScript만 쓰면 .ts

즉, React + TypeScript 프로젝트에서는 대부분 .tsx를 사용하지만, 유틸 함수나 API 관련 파일 등 JSX가 필요 없는 경우 .ts를 사용하면 된다

 

Next.js에서 사용하는 세 가지 주요 명령어

npm run dev	개발할 때	로컬 개발 서버에서 코드 변경 즉시 반영 (Hot Reload)
npm run build	배포 전에 최적화 빌드	최적화된 정적/서버 렌더링 파일 생성
npm run start	배포 후 운영 서버 실행	빌드된 프로젝트 실행 (npm run build 이후 사용)

 

npm run dev (개발 서버 실행)

• Next.js **개발 모드(Development Mode)**에서 실행
• 코드 변경 시 자동 새로고침 (Hot Module Replacement, HMR) 지원
• localhost:3000에서 애플리케이션 실행됨 (기본값)

 

npm run build (프로덕션 빌드 생성)

• Next.js 애플리케이션을 최적화된 상태로 빌드
• out/, .next/ 디렉토리에 정적 HTML, 서버 렌더링 결과 저장
• 필요 없는 코드 제거 (Tree Shaking), 번들 최적화 진행
• 배포(Deploy) 전에 프로덕션용으로 프로젝트를 빌드할 때
• Vercel, AWS, Netlify 등에 배포하기 전에 실행

 

npm run start (프로덕션 서버 실행)

• npm run build로 생성된 빌드를 실행하는 프로덕션 서버 모드
• 개발 서버(npm run dev)와 다르게, HMR 없음 (코드 수정 시 반영 안 됨)
• 빠르고 최적화된 상태로 실행됨
• 배포 후 실제 서비스 운영 시 사용
• 개발 환경이 아니라, 실제 사용자에게 제공하는 서버를 실행할 때