[trello] 1. 환경설정하기 Next.js 14 / Typescript

 

소개

오늘은 Next.js 14 기반 위에서 Next.js14/ Typescript 환경설정을 해 보도록 하겠습니다.

---

1. Next.js 14, Typescript 세팅하기

 

터미널에 아래 코드를 입력합니다. 

npx create-next-app@latest

What is your project named? my-app 
// (프로젝트명)
Would you like to use TypeScript? No / Yes 
// Yes (Typescript 적용?)
Would you like to use ESLint? No / Yes 
// Yes (Eslint 적용?)
Would you like to use Tailwind CSS? No / Yes 
// Yes (Tailwind CSS 적용?)
Would you like to use `src/` directory? No / Yes 
// No (src 디렉토리를 사용?)
Would you like to use App Router? (recommended) No / Yes 
// Yes (App 라우터를 사용?)
Would you like to customize the default import alias (@/*)? No / Yes 
// No (import 구문 커스터마이징?)

 

위와 같이 입력하면 Next.js 14, Typescript 기반의 프로젝트가 생성됩니다. 

 

이후 아래 코드를 입력 후 http://localhost:3000 로 접속합니다.

npm run dev

 

 

 

참고 ) Next.js 의 주요 기능

1. 동적라우팅 : 동적으로 생성되는 페이지를 쉽게 구현 가능함. 파일 시스템을 기반으로 페이지를 만듦
2. API 라우팅 : API 엔드포인트를 직접 정의하여 서버리스 함수를 구현할 수 있음. 이를 통해 서버 사이드 로직을 실행하고 클라이언트에게 데이터를 제공할 수 있음
3. CSS 모듈 지원 : CSS 모듈을 기본적으로 지원하고 컴포넌트 단위로 스타일으 캡슐화함
4. 환경 변수 : '.env' 파일을 통해 환경 변수를 관리할 수 있음
5. 코드 스플리팅 : 코드 스플리팅을 자동으로 수행하여 페이지 로딩 속도를 최적화함
6. pre-rendering, SSR, SSG : 서버 측에서 컴포넌트를 랜더링하여 초기 로딩 속도를 개선하고 검색 엔진 최적화를 향상시킴
7. 정적 파일 제공 : 'public' 디렉토리에 파일을 추가하면 루트 URL 아래에서 접근 가능함
8. typescript : 별다른 webpack 설정없이 typescript 설치 후 바로 사용 가능

참고 ) Next.js 13 이전과 이후

1. App Router : 기존 pages/ 디렉토리 라우팅 방식에서 app/ 디레토리 라우팅 방식으로 (추가)변경됨 => 라우팅 환경 개선 및 레이아웃, 서버 컴포넌트, Data fetching 지원
   1. 레이아웃 : 공통 레이아웃 유지 가능 => 불필요한 리렌더링 방지 
   2. 서버 컴포넌트 : 디폴트로 서버 컴포넌트, 클라이언트로 전송되는 자바스크립트의 양을 줄임 => 초기 페이지 로딩 속도 높임
   3. Data fetching : 컴포넌트 레벨에서 SSR 적용 가능. fetch() Web API 활용 => 데이터를 서버에서 캐싱하고 revalidate 하는 기능을 사용하여 데이터를 효율적으로 관리 가능해짐.
2.  Turbopack : Rust 기반의 JS 번들링 툴인 Turbopack이 포함. Webpack 보다 700배 빠른 업데이트

다음 시간에는 Eslint, Prettier 설정을 진행해 보도록 하겠습니다.