노마드코더 NextJS 강의
npm으로 시작하려니까 에러가 터져서 강의와 다르게 yarn 으로 시작했다.
동한님이 이걸 쓰면 npm으로 설치가 될 거라고 했다. 다음에 해봐야지
--use-npm
yarn create-next-app
타입스크립트 활용
yarn create next-app --typescript
실행
yarn dev
라이브러리와 차이?
라이브러리: 우리가 원할 때 부르고 사용할 수 있는 것
프레임워크: 코드를적절한
곳에 넣어줘야 하는 것 - 수정할 수 없음
홈페이지 역할
/
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
페이지 요청 시점에 맞춰 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/
자바스크립트 오브젝트 프로퍼티 형식으로 적어준다.
/* 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}>