노마드 코더 NEXT JS 강의 정리 1

https://nomadcoders.co/nextjs-for-beginners

NextJS 14 시작하기 – 노마드 코더 Nomad Coders

노마드 코더 NEXT JS 강의 정리

강의 다봤으니까 정리하자

 

#1 INTRODUCTION

 

Next js 는 성능이 좋다. 앙

다양한 웹사이트에서 프레임워크로 사용

 

app router / page router

 

 

포로젝트 초기설정

npm init -y
npm install react@latest next@latest react-dom@latest
app폴더에 page.tsx / page.jsx 생성
npm run dev 

 

#2 ROUTING

 

Creating Routes

next.js는 폴더를 사용하여 경로를 정의하는 파일시스템기반 라우터를 사용한다.

각 폭더가 URL 세그먼트에 매핑되는 경로 세그먼트를 나타낸다.

중첩된 경로를 만들려면 폴더를 중첩하면된다.

ex) app/dashboard/setting/page.tsx -> /dashboard/setting

 

Creating UI
특별한 파일 규칙을 사용하여 각 경로 세그먼트에 대한 UI를 만든다. 가장 일반적인 것은 경로에 고유한 UI를 표시하는 페이지와 여러 경로에서 공유되는 UI를 표시하는 레이아웃이다.

예를 들어, 첫 페이지를 만들려면 앱 디렉토리에 page.js 파일을 추가하고 React 컴포넌트를 내보내면 된다/

ex) app/page.tsx -> /

 

Not Found

not-found 파일은 경로 세그먼트 내에서 notFound 함수가 던져질 때 UI를 렌더링하는 데 사용된다. 사용자 정의 UI를 제공하는 것과 함께 Next.js는 스트리밍된 응답의 경우 200 HTTP 상태 코드를 반환하고 스트리밍되지 않은 응답의 경우 404를 반환한다.

 

usePathname

usePathname은 현재 URL의 pathname을 읽게 해주는 클라이언트 컴포넌트 훅

 

Rendering

NEXT JS가 react 컴포넌트를 브라우저가 이해할 수 있도록 html로 변환하는 작업

 

CSR, SSR

아래링크 참고

nextjs에서는 모든 컴포넌트와 페이지는 서버에서 먼저 렌더링 

 

💦Hydration

SSR을 통해 만들어진 인터랙티브하지 않은 HTML (건조하다) 를 클라이언트 측 자바스크립트를 사용하여 인터랙티브한 리액트 컴포넌트로 변환(수분충전) 하는 과정

 

Client Componets

클라이언트 컴포넌트를 사용하려면 파일 상단의 import 위에 React "use client" 지시문을 추가하면된다.
"use client"는 서버와 클라이언트 컴포넌트 모듈 사이의 경계를 선언.

즉, 파일에 "use client"를 정의하면 자식 컴포넌트를 포함하여 파일로 가져온 다른 모든 모듈이 클라이언트 번들의 일부로 간주된다.

*서버 컴포넌트를 클라이언트 컴포넌트로 import 할수없다

 

Layout Pattern

react를 사용하면 페이지를 일련의 컴포넌트로 분해할 수 있다.

이런 컴포넌트는 페이지 간에 재사용되는 경우가 많다

ex) 네비게이션바, 푸터

import Navbar from './navbar'
import Footer from './footer'
 
export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}

 

MetaData

Next.js에는 SEO 및 웹 공유성을 개선하기 위해 애플리케이션 메타데이터(예: HTML 헤드 요소 내부의 메타 및 링크 태그)를 정의하는 데 사용할 수 있는 메타데이터 API가 있다.

• 정적 메타데이터

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}

• 동적 메타데이터

import type { Metadata, ResolvingMetadata } from 'next'
 
type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}
 
export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // read route params
  const id = params.id
 
  // fetch data
  const product = await fetch(`https://.../${id}`).then((res) => res.json())
 
  // optionally access and extend (rather than replace) parent metadata
  const previousImages = (await parent).openGraph?.images || []
 
  return {
    title: product.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}
 
export default function Page({ params, searchParams }: Props) {}

 

Dynamic Router (App Router)

동적 세그먼트는 폴더 이름을 대괄호[ ]로 묶어 생성할 수 있다. 

 

 

 

 

 

 

 

 

내용이 길어져서 나머지는 2편에 작성...

 

그외 참고 사이트

https://nextjs.org/

Next.js by Vercel - The React Framework