woodstockwoodstock.hashnode.dev·Oct 11, 2024Next.js의 이미지 최적화이미지 최적화 1.기본 사용법 Next.js에서는 이미지 최적화를 위해 next/image컴포넌트를 사용한다. import Image from 'next/image' <Image src="/images/profile.jpg" width={500} height={500} alt="프로필 이미지" quality={75} /> src: 이미지 소스 URL width 및 height: 필수 속석으로, 이미지의 원본 크기를 ...Next.js
woodstockwoodstock.hashnode.dev·Oct 11, 2024[Pages Router] 검색 엔진 최적화(SEO)페이지 라우터의 SEO 설정 1.Head 페이지 별로 Head컴포넌트 안에 작성하여 SEO 관련 메타 데이터를 설정할 수 있다. import Head from "next/head"; export default Page() { return ( <> <Head> <title>타이틀</title> <meata property="og:image" content={썸네일 주소} /> <...NextJSpages router
woodstockwoodstock.hashnode.dev·Sep 11, 2024[Pages Router] 레이아웃 설정페이지 라우터의 레이아웃 설정 . ├── src │ ├── components │ │ ├── global-layout.tsx │ │ └── searchable-layout.tsx │ ├── pages │ │ ├── _app.tsx │ │ ├── book │ │ │ └── [[...id]].tsx │ │ ├── search │ │ │ └── index.tsx 1. 글로벌 레이아웃 ...NextJSNext.js
woodstockwoodstock.hashnode.dev·Sep 10, 2024Next.js의 네비게이팅네비게이팅 방식 1. 페이지 이동 1-1. Link <header> <Link href={"/"}>index</Link> <Link href={"/search"}>search</Link> <Link href={"/book/1"}>book/1</Link> </header> 1-2. Programmatic Navigation 사용자가 링크를 직접 클릭했을 때 페이지를 이동시키는 방식이 아니라, 특정 버튼이 클릭되거나 특정 조건을 만족...NextJSnavigation
woodstockwoodstock.hashnode.dev·Sep 9, 2024[Pages Router] 페이지 라우팅 방식페이지 라우터의 라우팅 방식 1. 경로 페이지 . ├── src │ ├── pages │ │ ├── _app.tsx │ │ ├── _document.tsx │ │ ├── index.tsx │ │ └── search │ │ └── index.tsx // '/search' │ │ └── search.tsx // '/search/settiㅍng' 2. 쿼리스트링 '/search?q...NextJSpages router
Mushfiqur Rahmanmushfiq.hashnode.dev·Mar 20, 2024PWA - Progressive Web Apps কি এবং React or Next js এ কিভাবে করতে হয়?আমরা ব্রাউজার দিয়ে YouTube, Facebook ব্রাউজ করার সময় দেখি যে উপরে url এর ডান সাইটে ডাউনলোড করার জন্য একটা বাটন দেখায়। যেটায় ক্লিক করলে আপনার কম্পিউটার অথবা মোবাইল ফোনে ঐ ওয়েব সাইটের একটা এপ ইন্সটল হয় যেটা ঠিক এন্ড্রয়েড এপ না, শুধু মাত্র ওয়েব সাইটের ম...51 readsPWA
Dana Ciocandanaciocan.com·Feb 25, 2024Next.js pages vs app routerNext.js v13, released in October 2022, caused a whole load of ruckus in the front end development world. In May of that year, Next.js had put out a "Layouts RFC" that announced the big paradigm shift that was to come. This is the biggest change to Ne...133 readsReact Server Componentspages router
![[Pages Router] 검색 엔진 최적화(SEO)](https://cdn.hashnode.com/res/hashnode/image/upload/v1728643893128/17caad8e-2c07-4c21-8b5d-3c4fcf9b6f34.avif?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
![[Pages Router] 레이아웃 설정](https://cdn.hashnode.com/res/hashnode/image/upload/v1726059328426/4970a31e-0a79-488b-82d8-a75709696871.avif?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
![[Pages Router] 페이지 라우팅 방식](https://cdn.hashnode.com/res/hashnode/image/upload/v1725893049432/7b821fa4-8db9-4971-bb52-a6e8719a8938.avif?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
