[Next.js 13] 설치 및 환경 설정

NEXT.js 13

Next.js란 무엇인가요?

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

내부적으로 Next.js는 번들링, 컴파일 등과 같이 React에 필요한 도구를 추상화하고 자동으로 구성합니다. 이를 통해 구성에 시간을 낭비하는 대신 애플리케이션 구축에 집중할 수 있습니다.

개인 개발자이든 대규모 팀의 일원이든 Next.js는 대화형의 동적이며 빠른 React 애플리케이션을 구축하는 데 도움을 줄 수 있습니다.

 

1. node js 18버전 이상 설치
https://nodejs.org/ko

Node.js

2. Visual Studio Code

npx create-next-app@latest

4. VSCode에서 생성한 프로젝트로 오픈

Sass 설치

npm install --save-dev sass

5. next.config.js 설정 - Sass

sass컴파일 설정

next.config.js

const path = require('path')
 
module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

6. dev 미리보기

npm run dev

7. 프로젝트 폴더 구조

src/app : 소스 코드 파일

page.js : 메인페이지

layout.js : 메인페이지 감싸는 레이아웃 페이지

public 폴더 : static 파일 보관용(images등)

api : 서버기능 만드는 곳

next.config.js : nextjs 설정 파일

node_modules 폴더 : 설치한 라이브러리 폴더

package.json : 설치한 라이브러리 버전 기록 파일