Next JS#1の学習

누가 넥스트 쉽다고 했쥬?!! 은근히 React 랑 다르고 세부설정해줘야 하는 게 꽤 있음 조심하기 영어자료로 만든 포스팅이라 영어밭..조심하기 資料はNextです.Js dogs
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.関数構成部品の下部に作成
getStaticPaths (Static Generation): Specify dynamic routes to pre-render pages based on data.
-vs StaticProps比較、ページ全体をインポート(パス)
1)idをreturnとしてインポートし続ける

2)mapにまとめて、インポートパスのみを返す👈👈
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.propsとしてfunction構成部品に入れ、コンソールで表示する({articles})3.returnにデータを入れるか、propsを使用して他の構成部品にデータを入れる

Memo.

getStaticProps
コンストラクション時に1回のみ呼び出されます!
静的ファイルとして構築され、以降は変更できません.

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

🙄レビュー

どうてきルーティング
49:47 - Export a Static Website 👈 復習する
53:18 - API Routes 👈 復習する
59:24 - Using the API Data 👈 復習する