nextjs
next.js =full (react)
nextjs는 react 문법 기반
npx create-next-app@latest --experimental-app
하나의 return 에는 하나의 depth <div> 태그만,, <div만 인지는 모르겠음,
클래스 넣고 싶으면 class 아니고 className
html 안에 변수 넣으려면 {}
style 속성 넣으려면 style={{}}
자동 라우팅, 폴더 하나 만들면 라우팅 끝
그 안에 page.js 파일 만들면됨
a 태그 대신 Link 태그, 같은 거임, import Link 해야 함
룰:
1) page.js 보여줄 때 옆에 layout.js 있으면 그걸로 page.js 싸맴
2) 상위폴더에 layout.js 있으면 그걸로 1번 싸맴
html 안에서 for문이 아닌 map 함수 활용, 반복문 안에 key로 구분할 수 있게 넣으라고 권고함
이미지는 보통 public 폴더 안에
이미지 외부 이미지는 width, height 꼭 필요함
이미지 처리할 때 src={`/food${i}.png`} 이렇게 쓰기도함
리액트 뒤로가기
nextjs: 서버 컴포넌트, 클라이언트 컴포넌트
- 맨위에 'use client'
클라 컴포 좋음,
서버 컴포 로딩 속도 빠름, 검색엔진 노출
nextjs summary
2024. 8. 2. 19:41