2. Next.js 개발환경 세팅

 

1. node.js 설치 18버전 이상

2. VSCode설치

3. next.js 사용할 폴더 생성후 에디터로 생성

 

#프로젝트생성
npx create-next-app@latest --experimental-app

 

이렇게되면 project name이 my-app으로 생성되었기 때문에 폴더 안에 my-app으로 VSCode 에디터에서 다시 my-app 폴더로 열어주시면 됩니다.

 

요놈이 메인페이지 되겠구여, 이놈을 웹에서 보고싶다 하면 터미널에서 다음과 같이 적어주시구여

 

npm run dev

위 처럼 터미널에 작성하면 미리보기가 나오게 될겁니다~

 

잘 나오구여

 

프로젝트 파일들 설명

 

 

app 폴더 : 님들이 코드짤 폴더 

page.js : 메인페이지 

layout.js : 메인페이지 감싸는 용도의 페이지 

                  쉽게 말해서 page.js 의 밖에 있다고 생각하면 되고 반복적으로 페이지에 사용할 헤더라던지 사이드바 뭐 그런거 만드는 곳
                  hade 태그 그런거 집어 넣기도 하구여 페이지간 공유하고싶은 그런것들 있지요 상단바 같은거 집어넣으면 유용하구여

globals.css :  모든곳에 css디자인 입히는 곳이구여

page.module.css :  특정 페이지에만 css 적용 가능하구여 xxx.module.css로 끝나게 만들면 특정페이지에 사용 가능하구여

 

public 폴더 : 이미지나 static 파일 보관용 

api 폴더 : 서버기능 만드는 곳 

 

next.config.js : nextjs 설정 파일 

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

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

 

 

실습을 진행해 볼건데

globals.css와 page.module.css, page.js 싹다 지우고 시작할 거구여

import Image from "next/image";
import styles from "./page.module.css";

export default function Home() {
  return (
   <div>

   </div>
  )
}

page.js는 이것만 두고 시작할 겁니다.