NEXT.js 시작하기

choonhoson@Choonhoui-MacBookAir my-app % ls -l
total 392
-rw-r--r--@   1 choonhoson  staff    1383  5 24 22:25 README.md
-rw-r--r--@   1 choonhoson  staff     201  5 24 22:25 next-env.d.ts
-rw-r--r--@   1 choonhoson  staff      92  5 24 22:25 next.config.mjs
drwxr-xr-x@ 314 choonhoson  staff   10048  5 24 22:25 node_modules
-rw-r--r--@   1 choonhoson  staff  171917  5 24 22:25 package-lock.json
-rw-r--r--@   1 choonhoson  staff     516  5 24 22:25 package.json
-rw-r--r--@   1 choonhoson  staff     135  5 24 22:25 postcss.config.mjs
drwxr-xr-x@   4 choonhoson  staff     128  5 24 22:25 public
drwxr-xr-x@   3 choonhoson  staff      96  5 24 22:25 src
-rw-r--r--@   1 choonhoson  staff     510  5 24 22:25 tailwind.config.ts
-rw-r--r--@   1 choonhoson  staff     578  5 24 22:25 tsconfig.json

Next.js 시작하기

프로젝트 생성

npx create-next-app@latest

cf. 일반적인 react 프로젝트를 생성하려면 npx create-react-app {project 명}

프로젝트 폴더 구조

choonhoson@Choonhoui-MacBookAir test3 % tree -d -L 2
.
└── my-app
    ├── node_modules
    ├── public
    └── src

5 directories

 

app	App Router
pages	Pages Router
public	Static asssets to be served
src	Optional applicaiton source folder

최상위 폴더의 파일들

choonhoson@Choonhoui-MacBookAir my-app % ls -l
total 392
-rw-r--r--@   1 choonhoson  staff    1383  5 24 22:25 README.md
-rw-r--r--@   1 choonhoson  staff     201  5 24 22:25 next-env.d.ts
-rw-r--r--@   1 choonhoson  staff      92  5 24 22:25 next.config.mjs
drwxr-xr-x@ 314 choonhoson  staff   10048  5 24 22:25 node_modules
-rw-r--r--@   1 choonhoson  staff  171917  5 24 22:25 package-lock.json
-rw-r--r--@   1 choonhoson  staff     516  5 24 22:25 package.json
-rw-r--r--@   1 choonhoson  staff     135  5 24 22:25 postcss.config.mjs
drwxr-xr-x@   4 choonhoson  staff     128  5 24 22:25 public
drwxr-xr-x@   3 choonhoson  staff      96  5 24 22:25 src
-rw-r--r--@   1 choonhoson  staff     510  5 24 22:25 tailwind.config.ts
-rw-r--r--@   1 choonhoson  staff     578  5 24 22:25 tsconfig.json