넥스트JS 배우기 #1

누가 넥스트 쉽다고 했쥬?!! 은근히 React 랑 다르고 세부설정해줘야 하는 게 꽤 있음 조심하기 영어자료로 만든 포스팅이라 영어밭..조심하기

자료는 Next.Js 독스
https://nextjs.org/docs/getting-started
Tutorial은 Brad 형님꺼 (최소 3번 본듯)
https://www.youtube.com/watch?v=mTz0GXj8NN0&t=990s
https://github.com/bradtraversy/next-crash-course

Timestamps:
0:00 - Intro & Slides 
6:52 - Getting Setup with create-next-app ✅
8:23 - Files & Folders ✅
11:37 - Pages & Routing ✅
13:14 - Head ✅
16:05 - Layouts & CSS Modules ✅
20:56 - Nav Component & Link ✅
23:34 - Create a Header ✅
25:05 - Styled JSX ✅
27:46 - Custom Document ✅
31:16 - Data Fetching ✅
32:02 - getStaticProps() ✅ 
33:58 - Showing Data ✅
40:15 - Nested Routing ✅
42:46 - getServerSideProps() ✅ 
46:00 - getStaticPaths() ✅
49:47 - Export a Static Website 👈 복습
53:18 - API Routes 👈 복습
59:24 - Using the API Data 👈 복습
1:03:48 - Custom Meta Component

Next.js
-a React frontend development web framework that enables funcitonality
like server-side renderin and static site generation

-unlike a traditional React app where the entire application is loaded and rendered on the client, Next.js allows the first pages load to be rendered by the server, which is great for SEO & performance

Other benetifts

-Easy page routing
-API routes
-out of the box Typescript & Sass
Statice site generation(next export)
Easy deployment(by Next)

💥 Some difficulties I faced... (to be updated)

Image element -
styled components

Setup

recommend creating a new Next.js app using create-next-app, which sets up everything automatically for you. To create a project, run:

npx create-next-app@latest
yarn create next-app

Pages

Pages https://nextjs.org/docs/basic-features/pages
Dynamic Routes https://nextjs.org/docs/routing/dynamic-routes

Next.js supports pages with dynamic routes. For example, if you create a file called pages/posts/[id].js, then it will be accessible at posts/1, posts/2, etc.
독스)

import { useRouter } from 'next/router'//임포트

const Post = () => {
  const router = useRouter() //변수지정
  const { pid } = router.query

  return <p>Post: {pid}</p>
}

export default Post

다른 예)

Data Fetching

three unique Next.js functions you can use to fetch data for pre-rendering:

(00:32:00)

getStaticProps (Static Generation): Fetch data at build time.

1.function 컴포넌트 하단에 작성

getStaticPaths (Static Generation): Specify dynamic routes to pre-render pages based on data.

-vs StaticProps에 비교, 페이지 전체를 가져옴(paths)

1)return 으로 id를 계속 가져오거나

2)map으로 정리하고 return은 paths만 가져오기👈👈
fallback:false => if we go to something that does not exist, we can jsut fallback 'false'!

getServerSideProps (Server-side Rendering): Fetch data on each request.

2.function 컴포넌트에 props로 넣고 콘솔로 확인해보기
({articles})
3.return 안에 데이터 넣어주기 혹은 props로 다른 컴포넌트에 주기

Memo.

getStaticProps
"빌드 시에 딱 한 번"만 호출!
static file로 빌드, 이후 수정 불가함

References

학습에 참고한 내용
https://beside-lab.tistory.com/entry/Nextjs-getStaticProps-vs-getServerSideProps-%EC%B0%A8%EC%9D%B4%EC%99%80-%ED%99%9C%EC%9A%A9

🙄Review 하기

다이나믹 라우팅
49:47 - Export a Static Website 👈 복습
53:18 - API Routes 👈 복습
59:24 - Using the API Data 👈 복습