Raviblog.perfectbase.dev·Dec 20, 2024Building a Super Fast Next.js App with the App RouterSome time ago I was building a new app with the Next.js App Router, but the app navigation felt quite slower than I was used to with the Pages Router, so I decided to try to understand better the App Router features and how they affect the navigation...Next.js
Priyansh Singhpriyansh-singh.hashnode.dev·Oct 17, 2024Learning Next.js 13 App Router: A Comprehensive Guide 🚀Next.js has revolutionized React development with its powerful features and intuitive design. With the release of Next.js 13, the new App Router has taken center stage, offering developers a more flexible and powerful way to structure their applicati...Next.js
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[App Router] 검색 엔진 최적화(SEO)앱 라우터의 SEO 설정 1.Metadata App Router에서는 Pages Router의 Head컴포넌트를 대체하는 metadata객체를 이용해 페이지의 메타데이터를 설정할 수 있다. import { Metadata } from 'next'; export const metadata: Metadata = { title: "타이틀", description: "설명" openGraph: { title: "타이틀, d...NextJSNext.js
Rishi Bakshirishibakshi.hashnode.dev·Oct 9, 2024Dynamic Routes in Next.js: Understanding the Significance of params and searchParamsOne common mistake developers make in Next.js is misunderstanding how dynamic routes work, particularly regarding the params and searchParams props. It’s crucial to understand that these props are only accessible in the page components and not in any...10 likesYou Don't Know Next.jsNext.js
Vishwas GopinathforBuilder.iobuilderio.hashnode.dev·Sep 17, 2024Key Considerations for Next.js App Router FilesNext.js has become a powerhouse in the React ecosystem, and understanding its file conventions is key to getting the most out of it. In this blog post, we'll break down the 9 special routing files in the App Router, which replaces the older pages dir...1 likeNext.js
woodstockwoodstock.hashnode.dev·Sep 11, 2024[App Router] 레이아웃 설정앱 라우터의 레이아웃 설정 App Router에서는 layout.tsx파일을 사용하여 특정 경로와 그 하위 경로에 공통적으로 적용될 레이아웃을 정의할 수 있다. . ├── src │ └── app │ ├── search │ │ ├── layout.tsx // search 하위 경로 레이아웃 │ │ └── page.tsx │ ├── book │ │ └── [id] │ ...NextJSapp router
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[App Router] 페이지 라우팅 방식앱 라우터의 페이지 라우팅 방식 1. 경로 페이지 . ├── src │ ├── app │ │ ├──layout.tsx │ │ ├── page.tsx │ │ └── search │ │ └── page.tsx // '/search' 2. 쿼리스트링 '/search?q=쿼리스트링' 2-1. 서버 컴포넌트 export default function Page(props) { const { q } = p...NextJSNext.js
Pranav Bakalepranavbakale.hashnode.dev·Sep 4, 2024Streaming in Next JsWhile making server side requests using SSR, we all might have faced a issue like as long as the data is not available or the hydration process is not finished, the UI remains non-interactive. This becomes a bad user experience. When I started to e...Next.js
![[App Router] 검색 엔진 최적화(SEO)](https://cdn.hashnode.com/res/hashnode/image/upload/v1728643887403/243dd92a-c8c0-4d11-8ade-04b894a27bca.avif?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
![[App Router] 레이아웃 설정](https://cdn.hashnode.com/res/hashnode/image/upload/v1726059568225/620ad6b6-afd9-42b7-b687-bc9231f8b889.avif?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
![[App Router] 페이지 라우팅 방식](https://cdn.hashnode.com/res/hashnode/image/upload/v1725893331147/f436c4cc-697b-472a-b5c8-f3fbf4c54780.avif?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
