개발/Next.js

[Docs] Next.js로 앱 생성하기

yoosmg 2023. 4. 18. 02:24

Next.js app 생성하기

Next.js 앱을 생성하려면 터미널을 열고 앱을 생성하려는 디렉터리에 다음 명령을 실행해 준다

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

 

 

개발서버 실행하기

이제 nextjs-blog라는 새 디렉터리가 생겼다.

npm run dev 실행하고 http://localhost:3000에 접속하면 다음 페이지가 표시된다.

이 페이지는 Next.js에 대한 유용한 정보를 보여주는 스타터 템플릿 페이지.

 

 

 

 

페이지 편집하기
스타터 페이지를 편집하려면,

  1. Next.js 개발 서버가 실행 중인지 확인한다.
  2. 텍스트 에디터로 pages/index.js를 열고 원하는 텍스트를 수정한다.

파일을 저장하면 브라우저는 즉시 페이지를 새 텍스트로 자동 업데이트한다.

Next.js 개발 서버에는 빠른 새로 고침(Fast Refresh)가 활성화되어 있기 때문이다.

파일을 변경하면 Next.js가 브라우저에서 거의 즉각적으로 변경 사항을 적용한다.

따로 새로고침할 필요가 없어서 반복 작업을 처리하는 데 도움이 된다.

'개발 > Next.js' 카테고리의 다른 글

[Docs] 서드파티 자바스크립트 추가하기  (0) 2023.05.07
[Docs] 메타데이터 다루기  (0) 2023.05.06
[Docs] 정적 파일 사용하기  (0) 2023.04.26
[Docs] 페이지 간 이동하기  (0) 2023.04.18
[Docs]Next.js는 무엇일까  (0) 2023.04.18