[Next.js] 1. Next.js 시작하기

2024. 5. 18. 21:08·Back-end/Next.js
목차
  1. 1. Next.js란?
  2. 2. Next.js 시작하기
  3. 3. 프로젝트 구조 살펴보기
  4. 최상위 경로 파일
  5. 4. App Router
  6.  
  7. 참고
반응형

내가 몸 담고 있는 국민대학교 소프트웨어융합대학 웹 학술 동아리 대WINK의 공식 홈페이지 만들기에 사용된 Next.js

 

spring이랑 express.js만 해봤기 때문에 typescript나 react에 대한 선수 지식이 없어서 어려울 것 같다...

 

처음 다뤄보기 때문에 기초부터 차근차근 다뤄보자

1. Next.js란?

Next.js는 풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크이다. React 구성 요소를 사용하여 사용자 인터페이스를 구축하고 Next.js를 사용하여 추가 기능과 최적화를 수행할 수 있다.

 

2. Next.js 시작하기

다음 명령어로 프로젝트를 생성할 수 있다.

npx create-next-app@latest

 

이 방식은 react, react-dom, next 라이브러리를 자동적으로 설치해주는 방식이다.

 

해당 명령어를 실행하면 다음과 같은 프롬프트가 나온다.

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

 

Next.js는 이제 기본적으로 TypeScript , ESLint 및 Tailwind CSS 구성과 함께 제공된다. 따라서 프로젝트 자동 생성 시 package.json에 typescript, eslint, tailwind에 대한 패키지가 자동 설치된다.

 

테스트 겸 개발 서버를 실행해보자.

npm run dev 또는 yarn dev

 

실행하면 http://localhost:3000 주소로 app/page.tsx에 대한 페이지가 렌더링된다.

 

3. 프로젝트 구조 살펴보기

Next.js는 파일 시스템 라우팅, 즉, 파일 구조에 따라 애플리케이션의 경로가 결정되는 방식을 사용한다.

 

이는 두 가지로 나뉘는데, 기존의 page router 방식과 Next 13 버전부터 새로이 생겨난 app router 방식이다.

 

이 중에서 App Router 방식으로 스터디를 진행하고자 한다.

출처: Next.js 공식 문서

 

생성된 프로젝트 구조를 위 사진처럼 src/ 구조 또는 최상위 폴더 내에 app과 pages를 두는 경우로 나눌 수 있다.

 

app 앱 라우터
pages 페이지 라우터
public 제공할 정적 자산
src 선택적 애플리케이션 소스 폴더

 

본인은 npx create-next-app 으로 생성된 프로젝트를 기준으로 살펴보도록 하겠다.

 

my_app 프로젝트 안에 app, public 이 존재한다.

 

최상위 경로 파일

애플리케이션 구성, 종속성 관리, 미들웨어 실행, 모니터링 도구 통합 및 환경 변수 정의에 사용된다

next.config.js Next.js 구성 파일
package.json 프로젝트 종속성 및 스크립트
instrumentation.ts OpenTelemetry 및 계측 파일
middleware.ts Next.js 요청 미들웨어
.env 환경 변수
.env.local 로컬 환경 변수
.env.production 프로덕션 환경 변수
.env.development 개발 환경 변수
.eslintrc.json ESLint용 구성 파일
.gitignore 무시할 Git 파일 및 폴더
next-env.d.ts Next.js용 TypeScript 선언 파일
tsconfig.json TypeScript용 구성 파일
jsconfig.json JavaScript용 구성 파일

 

4. App Router

버전 13 이후부터 Next.js는 공유 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 React Server Components를 기반으로 구축된 App Router 방식을 사용한다.

 

app이라는 디렉터리 내에서 작동하는데 app. 디렉터리 는 디렉터리 app와 함께 작동하여 pages점진적인 채택을 허용합니다. 이를 통해 이전 동작에 대한 디렉터리의 다른 경로를 유지하면서 애플리케이션의 일부 경로를 새 동작으로 선택할 수 있다.

 

- 폴더

폴더는 경로를 정의하는데 사용된다. 경로는 root segment부터 파일이 포함된 최종 leaf segment까지 파일 시스템 계층 구조를 따라가는 중첩된 폴더의 단일 경로이다.

 

- 파일

파일은 경로 세그먼트에 표시되는 UI를 만드는 데 사용된다.

app router에서 사용 가능한 특정 유형의 tsx 파일들을 살펴보자

layout.tsx // 세그먼트 및 해당 하위 항목에 대한 공유 UI

page.tsx // 경로의 고유한 UI 및 경로에 공개적으로 액세스 가능

loading.tsx // 로딩 중 UI

not-found.tsx // 404 Not Found UI

error.tsx //error 처리 파일

global-error.tsx // 전역 오류 UI

route.tsx // API 엔드포인트 UI

template.tsx // 다시 렌더링 되는 layout

default.tsx // 병렬 경로 대체 page

 

 

이렇게 해서 기초적인 프로젝트는 생성해보았다. 다음은 라우팅에 대해서 알아보도록 하겠다

 

 


참고

 

Getting Started: Installation | Next.js

Create a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file.

nextjs.org

 

 

Next.js 14 시작하기 #2 Nested, Dynamic Routing

Next.js 14 시작하기 Catch-all Segment Nested, Dynamic Routing

velog.io

 

반응형

'Back-end > Next.js' 카테고리의 다른 글

[Next.js] 2. Routing에 대하여  (0) 2024.05.19
  1. 1. Next.js란?
  2. 2. Next.js 시작하기
  3. 3. 프로젝트 구조 살펴보기
  4. 최상위 경로 파일
  5. 4. App Router
  6.  
  7. 참고
'Back-end/Next.js' 카테고리의 다른 글
  • [Next.js] 2. Routing에 대하여
류건
류건
개발 일지
  • 류건
    건's Dev
    류건
  • 전체
    오늘
    어제
    • 분류 전체보기 (94)
      • Back-end (55)
        • Spring (30)
        • Nest.js (3)
        • Next.js (2)
        • Node.js (3)
      • Infra & Cloud (20)
        • Cloud Computing (6)
        • Docker (3)
        • AWS (7)
      • Java (2)
      • Computer Science (12)
        • Computer Network (0)
        • Operating System (0)
        • 정보 보호와 시스템 보안 (12)
      • 회고록 (1)
        • 우아한테크코스 (3)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    https
    JWT
    Lock
    node.js
    ssl
    nginx
    Github Actions
    ddl-auto
    db
    CI/CD
    어노테이션
    WebClient
    정보보호
    CORS
    보안
    Nest.js
    JPA
    고가용성
    Spring
    public key
    aws
    EC2
    티스토리챌린지
    Kafka
    CD
    Docker
    Spring Boot
    Webflux
    express.js
    오블완
  • 최근 댓글

  • 최근 글

  • 반응형
  • hELLO· Designed By정상우.v4.10.0
류건
[Next.js] 1. Next.js 시작하기
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.