woodstock's devlog
Tag

Next.js

#nextjs

More content

Read more stories on Hashnode

Articles with this tag

Next.js의 이미지 최적화

Oct 11, 20242 min read8 views

이미지 최적화 1.기본 사용법 Next.js에서는 이미지 최적화를 위해 next/image컴포넌트를 사용한다. import Image from 'next/image' <Image src="/images/profile.jpg" width={500} ...

Next.js의 이미지 최적화

[App Router] 검색 엔진 최적화(SEO)

Oct 11, 20242 min read1 views

앱 라우터의 SEO 설정 1.Metadata App Router에서는 Pages Router의 Head컴포넌트를 대체하는 metadata객체를 이용해 페이지의 메타데이터를 설정할 수 있다. import { Metadata } from 'next'; export...

[App Router] 검색 엔진 최적화(SEO)

[Pages Router] 검색 엔진 최적화(SEO)

Oct 11, 20242 min read4 views

페이지 라우터의 SEO 설정 1.Head 페이지 별로 Head컴포넌트 안에 작성하여 SEO 관련 메타 데이터를 설정할 수 있다. import Head from "next/head"; export default Page() { return ( <> ...

[Pages Router] 검색 엔진 최적화(SEO)

[App Router] 레이아웃 설정

Sep 11, 20241 min read7 views

앱 라우터의 레이아웃 설정 App Router에서는 layout.tsx파일을 사용하여 특정 경로와 그 하위 경로에 공통적으로 적용될 레이아웃을 정의할 수 있다. . ├── src │ └── app │ ├── search │ │ ├──...

[App Router] 레이아웃 설정

[Pages Router] 레이아웃 설정

Sep 11, 20242 min read7 views

페이지 라우터의 레이아웃 설정 . ├── src │ ├── components │ │ ├── global-layout.tsx │ │ └── searchable-layout.tsx │ ├── pages │ │ ├── _app.tsx │ ...

[Pages Router] 레이아웃 설정

Next.js의 네비게이팅

Sep 10, 20241 min read4 views

네비게이팅 방식 1. 페이지 이동 1-1. Link <header> <Link href={"/"}>index</Link> <Link href={"/search"}>search</Link> <Link...

Next.js의 네비게이팅