Priyansh SinghforLearning NextJSpriyansh-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...DiscussNext.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: 필수 속석으로, 이미지의 원본 크기를 ...DiscussNext.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...DiscussNextJSNext.js
Rishi BakshiforRishi Bakshi Blogrishibakshi.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...Discuss·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...Discuss·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] │ ...DiscussNextJSapp 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 사용자가 링크를 직접 클릭했을 때 페이지를 이동시키는 방식이 아니라, 특정 버튼이 클릭되거나 특정 조건을 만족...DiscussNextJSnavigation
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...DiscussNextJSNext.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...DiscussNext.js
Daniel Simonsonmariposablog.hashnode.dev·Jul 20, 2024Paginate with Sanity's GROQ and NEXT/NAVIGATIONI was working on a project and learned some stuff while implement pagination which I'm passing along. Today we'll be going through some of the details of Sanity's GROQ and Next's navigation methods. For those who don't know or haven't heard, GROQ is ...Discuss·35 readsNEXT/NAVIGATION
![[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)
