실습 코드 (Part 1 ~ Part 2)

https://github.com/lopun/inflearn-next-tutorial

강의 진행순서

1. Server Action이란?

   • https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

2. Server Action 사용 예시

   유저를 DB에서 검색하는 예제를 두 가지 방식으로 만들어보면서 Server Action의 장점을 설명해드릴 예정입니다.

   • fetch + REST API
   • Server Action

   Server Action 무료강좌 (Next.js 공식 무료강좌 - 한글자막 지원)

   https://www.youtube.com/watch?v=dDpZfOQBMaU

3. Metadata

   Next.js는 SEO와 웹 공유성을 향상시키기 위해 어플리케이션의 메타데이터 (예: HTML head 요소 내의 메타 및 링크 태그)를 정의하는 데 사용할 수 있는 메타데이터 API를 가지고 있습니다.

   메타데이터를 어플리케이션에 추가하는 두 가지 방법이 있습니다:

   • Static Metadata 방식

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

   • Dynamic Metadata 방식

     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) {}