[컴] next js 시작하기

nextjs / react / commerce / client

next js 시작하기

여기서는 pnpm(pnpm - npm) 을 사용한다.

• 쿠…sal: [컴] pnpm

next-app 생성

pnpm create next-app --typescript

위처럼 하면, 아래의 package를 설치하고, run script 를 set 한 것과 같다. --typescript는 typescript 를 사용할 때 사용하는 option 이다.

pnpm add next react react-dom

logs:

c:\myproj\nextjs>pnpm create next-app --typescript
../../../../.pnpm-store/v3/tmp/dlx-12440 |   +1 +
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: d:\.pnpm-store\v3
  Virtual store is at:             ../../../../.pnpm-store/v3/tmp/dlx-12440/node_modules/.pnpm
../../../../.pnpm-store/v3/tmp/dlx-12440 | Progress: resolved 1, reused 1, downloaded 0, added 1, done
√ What is your project named? ... sashow-client
√ Would you like to use ESLint with this project? ... No / Yes
√ Would you like to use `src/` directory with this project? ... No / Yes
√ Would you like to use experimental `app/` directory with this project? ... No / Yes
√ What import alias would you like configured? ... @/*
Creating a new Next.js app in c:\myproj\nextjs\sashow-client.

Using pnpm.

Installing dependencies:
- react
- react-dom
- next
- @next/font
- typescript
- @types/react
- @types/node
- @types/react-dom
- eslint
- eslint-config-next

Packages: +267
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: d:\.pnpm-store\v3
  Virtual store is at:             node_modules/.pnpm
Progress: resolved 279, reused 267, downloaded 0, added 267, done

dependencies:
+ @next/font 13.1.6
+ @types/node 18.11.19
+ @types/react 18.0.27
+ @types/react-dom 18.0.10
+ eslint 8.33.0
+ eslint-config-next 13.1.6
+ next 13.1.6
+ react 18.2.0
+ react-dom 18.2.0
+ typescript 4.9.5

Done in 22.8s

Initializing project with template: default

Initialized a git repository.

Success! Created sashow-client at c:\myproj\nextjs\sashow-client

dev server

pnpm dev 를 하면, 개발서버를 띄워준다.

웹브라우저에서 http://localhost:3000 를 통해 접근할 수 있다.

cd myproj
pnpm dev

pages

다음처럼 pages 에 있는 file 이 compile 돼서, .next\static\chunks\pages 안으로 가게 된다.

• c:\myproj\src\pages\index.tsx –> c:\myproj\.next\static\chunks\pages\index.js

page 안에 React component 를 만들어서 넣으면, 그 경로의 page로 만들어준다.

예를 들어, pages/mypage.tsx 파일을 만들어 넣으면, http://localhost:3000/mypage 에 접근하면 해당 component 가 보여진다. 사용가능한 확장자는 js, jsx, ts, tsx 이다.

dynamic routes

dynamic routes 도 된다. 예를 들어

pages/posts/[id].tsx 를 만들면, http://localhost:3000/posts/1, http://localhost:3000/posts/2 , … 등의 접근이 가능하다.

rendering

2개 방식이 있다.

• 하나는 static page 를 만드는 것 : Nextjs 에서는 이것을 추천한다. 그리고, 이것이 CDN 등에서 cache 를 할 수 있기에 더 효율적이다.
• 다른 하나는 server-side rendering

이다.

rendering, static generation

next build 를 하면 된다. package.json 의 run script 에 이미 있기에 아래처럼 build 를 하면 된다.

pnpm build

getStaticProps

static page를 만들때 server에서 data 를 가져와서 보여주는 경우에 대한 처리도 가능하다. 이를 위해서 getStaticProps라는 함수를 export 해줘야 한다.

export 방법:

이 함수는 page 에서만 가능하다. page가 아닌 _app 등의 file 에서는 작동하지 않는다. 이 함수는 standalone function 으로 export 해야 한다. page component 의 property 로 추가하면 build 시점에 동작하지 않는다. (참고)

next dev 시:

next dev 시점에는 getStaticProps는 매 request 마다 호출된다.(참고)

동작:

이 함수는 next build 시점에 수행된다. 이 getStaticProps 는 build 타임에 server쪽에 request 를 날리게 해주는 것이라서, server 에 날리는 request 가 client 에서 수행되지 않는다. 그래서 server 에서 사용하는 함수를 그대로 써서 database 에 직접접근해서 data 를 가져와도 된다고 한다.(참고)

me: 개인적으로 getStaticProps 에서 was 를 통하지 않고, database를 직접 호출하는 방법을 선호하지 않는다. 이렇게 되면, 결국 이전에 web server 에서 사용하던 template 과 크게 다를바 없다. 그전에도 그것의 문제는 code가 너무 얽혀서, 코드를 이해하는 것을 어렵게 한다.

배포시 JSON으로 배포:

getStaticProps 로 요청된 값은 JSON 으로 저장돼서 deploy 된다. 그래서 client code 에서 getStaticProps 를 호출하는 code 는 build 시점에 JSON 을 호출하는 코드로 변경된다.(참고)

getStaticProps를 사용해야 하는 경우:

• 페이지를 렌더링하는 데 필요한 데이터가 빌드 시점에 사용 가능한 경우: 예를 들면, 사용자에 따라 바뀌지 않는 data 들, 항상 같은 data 들이 있을 수 있다. 대체로 static 한 정보들, 예를 들면 faq 같은 것들.
• 데이터가 headless CMS(content management system)에서 제공됩니다.
• 페이지가 사전 렌더링되어야 하고(SEO를 위해) 매우 빨라야 한다. getStaticProps는 성능을 위해 CDN에서 캐시할 수 있는 HTML 및 JSON 파일을 생성한다.
• 데이터가 공개적으로 캐시될 수 있다(사용자별이 아님). 특정 상황에서는 미들웨어를 사용하여 경로를 다시 작성함으로써 이 조건을 우회할 수 있다. : middleware 이야기는 아마도 cache 된 것을 사용하지 않고, 새로운 page 를 접근하게 하는 방법인듯.

배포

• Deployment | Next.js

next build를 하면 .next folder에 만들어진다.

자신의 WAS(Web Application Server) 에 deploy 하기

• Advanced Features: Custom Server | Next.js
• 예, next.js/examples/custom-server at canary · vercel/next.js · GitHub

Reserence

1. Getting Started | Next.js