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가 브라우저에서 거의 즉각적으로 변경 사항을 적용한다.
따로 새로고침할 필요가 없어서 반복 작업을 처리하는 데 도움이 된다.
'개발 > 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 |