Next.js new project building

 

 

typescript - n

eslint - y

tailwind css - y

src/directory - y

app router - y

import alias - n

 

npm run dev

 

localhost 

 

view

 

---

Next.js 13 - 2. 샘플앱 세탁

 

layout.js

웹페이지 골격을 구성합니다.

{children} 이 page.js와 연결됩니다.

 

page.js

---

Next.js 13 - 3. 배포

 

 

---

vs code 에서 Next.js 새 프로젝트 만들기 매뉴얼을 안내합니다.

---

Node.js install

 

 

https://lshjju.tistory.com/105

Node.js install - 노드제이에스 설치하기

---

install

 

넥스트제이에스 공홈

https://nextjs.org/

 

설치 매뉴얼입니다. 

참고 하세요.

https://nextjs.org/docs/app/getting-started/installation

 

npx create-next-app@latest .

terminal

 

새프로젝트 디렉토리 터미널에서 입력하면 개발환경이 세팅 됩니다.

 

 

---

Error

 

에러가 날 경우 아래 포스팅을 참고 하세요.

 

https://lshjju.tistory.com/107

react new project building - 크리에이트리액트앱으로 리액트

 

---

명령어

---

npm run dev

개발 환경 실행

---

npm run build

배포 파일 생성

---

npm run start

서비스 시작

리액트를 크리에이트리액트앱과 다릅니다.

개발환경 실행은 start가 아니고 dev입니다.

 

 

---

개발환경 실행

 

npm run dev

 

터미널에 뜨는 서버 유알엘을 탭합니다.

아래와 비슷한 그림이 뜨면 성공입니다.

 

---

Project main

 

코딩은 아래 파일부터 시작하면 됩니다.

pages/index.js

 

 

 

 

 

 

 

 

 

---

Codesandbox 로 Next.js 실행하기

 

https://codesandbox.io/

로그인하고 우측 상단 create 버튼 탭

 

 

 

 

Next.js 박스 탭

 

 

 

 

 

세팅하고 크리에이트데브박스 버튼 탭

 

 

 

 

 

우측 프리뷰 버튼 탭

 

 

 

 

 

 

좌측 익스플로러

app/page.tsx 

에서 시작합니다.

 

 

 

 

 

 

 

 

 

 

 

end

nextjs01.PNG

0.11MB

nextjs02.PNG

0.05MB

nextjs03.PNG

0.05MB

nextjs04.PNG

0.11MB

nextjs05.PNG

0.15MB

nextjs06.PNG

0.03MB