노마드코더 NextJS 강의
npm으로 시작하려니까 에러가 터져서 강의와 다르게 yarn 으로 시작했다.
동한님이 이걸 쓰면 npm으로 설치가 될 거라고 했다. 다음에 해봐야지
--use-npm
yarn create-next-app
타입스크립트 활용
yarn create next-app --typescript
실행
yarn dev
next.js
- 프레임워크
라이브러리와 차이?
라이브러리: 우리가 원할 때 부르고 사용할 수 있는 것
프레임워크: 코드를적절한곳에 넣어줘야 하는 것 - 수정할 수 없음
index.js
홈페이지 역할
/
pages/index.js
function HomePage() {
return <div>Welcome to Next.js!</div>
}
export default HomePage다이내믹 라우트 파라미터 - 파일명 <- URL 이름
컴포넌트의 이름은 중요하지 않음
export default function Potato() {
return <div>About Page!</div>;
}화면 보여주기
pages 폴더
export default fuction
Static pre rendering
페이지 요청 시점에 맞춰 html이 생성.
유저 연결 속도가 느리거나 자바스크립트가 비활성화 상태더라도 html을 불러옴.
네트워크 속도가 너무 느려 빈화면만 보일 불상사가 없음.
-> SEO에 효과적
공식 문서 발췌
These include pre-rendering with Server-side Rendering or Static Generation, and updating or creating content at runtime with Incremental Static Regeneration.
Link 태그 안에 a태그 없이 그냥 텍스트만 넣어도 잘 작동하는 이유
참고 : https://uchanlee.dev/nextjs/Why-using-a-tag-in-nextjs-Link/
css modules
자바스크립트 오브젝트 프로퍼티 형식으로 적어준다.
/* NavBar.module.css */
.nav {
display: flex;
justify-content: space-between;
background-color: tomato;
}//NavBar.js
return (
<nav className={styles.nav}>
<Link href="/">Home</Link>
<Link href="/about">About</Link>
</nav><\nav className={styles.nav}>
