export default function MovieDetail ({ params : {id},}: { params : {id : string}}){ return Movie {id}} 구조분해할당으로 params 에서 id 추출 후 id 를 string 값으로 임의할당함화면에 movie 뒤에 params 에서 가져온 id값을 보여줌    함수의 매개변수에서 구조 분해 할당을 사용해 params 객체의 id 값을 추출합니다.추출된 id 값을 화면에 동적으로 출력합니다.결과적으로 "Movie {id}" 형태로 id 값을 포함한 텍스트를 렌더링합니다. export default function MovieDetail ({ params : {id},}){ return Movie {id}..

layout.tsxexport const metadata :Metadata= { title : { template : "%s | this is next hihi :)" }, description : '하이'}  main page.tstexport const metadata = { title: ' main',}  이렇게 작성하면 main | this is next hihi :) 로 표시된다

[오류상황] metadata도 정의하고 싶고 use client 써서 useState 도 쓰고싶은 상황.둘 다 같이 사용하니까 오류 발생함  (page.tsx에서 발생)// "use client";// import { useState } from "react";export const metadata = { title: 'Next.js hihi ;)',}export default function Tomato() { // const [count, setCount] = useState(0); return ( main page {/* setCount(count + 1)}>Click me: {count} */} );} 위와같이 metadata 쓸거면 useState를 주석..

이 에러는 Next.js 13+의 App Router에서 발생하는 **"클라이언트 컴포넌트"**와 관련된 문제입니다. useState와 같은 React Hook은 클라이언트 사이드에서만 동작하므로 "use client" 지시어를 사용해야 한다는 의미입니다.문제 설명Next.js 13+의 App Router는 기본적으로 서버 컴포넌트를 사용합니다.하지만 useState, useEffect와 같은 React의 클라이언트 사이드 기능은 서버 컴포넌트에서는 사용할 수 없습니다.app/page.tsx 파일에서 **useState**를 사용하려면 이 컴포넌트를 클라이언트 컴포넌트로 명시해줘야 합니다.해결 방법"use client" 지시어를 app/page.tsx 파일의 최상단에 추가하세요.

Next.js는 요즘 웹 개발자들 사이에서 정말 핫한 프레임워크야. React 기반으로 만들어져 있는데, 이걸 사용하면 SEO 최적화부터 페이지 속도 향상까지 한 번에 잡을 수 있거든. React를 써봤다면, "아, 이거 내가 쓰던 거랑 비슷한데 더 편한데?" 싶을 거야.  Next.js가 뭔데?Next.js는 쉽게 말해서, React의 업그레이드 버전 같은 느낌이야. React로 프로젝트 만들다 보면 서버에서 렌더링해야 할 때나, SEO 때문에 골치 아플 때가 있잖아? Next.js는 이런 문제들을 쉽게 해결해줘.주요 특징 몇 가지를 간단히 살펴보면:서버사이드 렌더링(SSR)→ 서버에서 HTML을 만들어서 사용자에게 딱 보여주는 거야. 그래서 화면이 바로 뜨고, 검색 엔진이 페이지를 잘 읽을 수 있어...