개발/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에 대한 유용한 정보를 보여주는 스타터 템플릿 페이지.
페이지 편집하기
스타터 페이지를 편집하려면,
- Next.js 개발 서버가 실행 중인지 확인한다.
- 텍스트 에디터로 pages/index.js를 열고 원하는 텍스트를 수정한다.
파일을 저장하면 브라우저는 즉시 페이지를 새 텍스트로 자동 업데이트한다.
Next.js 개발 서버에는 빠른 새로 고침(Fast Refresh)가 활성화되어 있기 때문이다.
파일을 변경하면 Next.js가 브라우저에서 거의 즉각적으로 변경 사항을 적용한다.
따로 새로고침할 필요가 없어서 반복 작업을 처리하는 데 도움이 된다.