Next.js 공식문서 읽어보기14 Next.js Docs (14) Internationalization Internationalization(국제화) Next.js 를 사용하면 여러 언어를 지원하도록 컨텐츠의 라우팅과 렌더링을 구성할 수 있다. 웹사이트가 다른 여러 지역 적응할 수 있도록 하려면 번역된 컨텐츠를 포함하고, 국제화(internationalization) route를 포함시킨다. Terminology(용어) - Locale : 언어 및 서식 설정 집합에 대한 식별자이다. 여기에는 일반적으로 사용자가 선호하는 언어와 지리적 지역이 포함된다. - en-US : 미국에서 사용되는 영어 - nl - NL : 네덜란드에서 사용되는 네덜란드어 - nl : 일반적인 네덜란드어 Routing Overview( 라우팅 개요 ) 브라우저에서 사용자의 언어 환경설정을 사용하여 사용할 Locale을 선택하는 것이 .. 2023. 7. 19. Next.js Docs (13) Project Organization and File Colocation Project Organization and File Colocation (프로젝트 구성과 파일 배치) 라우팅 폴더 및 파일 컨벤션 외에도 Next.js는 프로젝트 파일을 구성하고 배치하는 방법에 대한 (의견이 없다.)(unopinionated, 어떤 뜻인지 감이 잘 안온다..) 이 페이지는 프로젝트를 구성하는데 사용할 수 있는 기본 동작 및 기능을 공유한다. - Safe colocation by default (기본적으로 안전한 배치) - Project organization features (프로젝트 구성 기능) - Project organization strategies (프로젝트 구성 전략) Safe colocation by default : 기본적으로 안전한 배치 앱 디렉토리에서 중첩된 폴더 계.. 2023. 7. 14. Next.js Docs (12) Middleware Middleware 미들웨어를 사용하면 response가 완료되기 전에 코드를 실행할 수 있다. 그런 다음 요청을 받아서 response를 다시 작성, 리디렉션, request header나 response header 수정, 또는 직접 응답할 수 있다. 캐시된 컨텐츠와 route가 match되기 전에 미들웨어가 실행된다. 자세한 내용은 Matching Paths 참고. Convention 프로젝트의 root에 있는 middleware.js 파일을 사용해서 미들웨어를 정의한다. 예를 들어 페이지또는 app과 동일한 레벨이거나, src 내부에 정의한다. Example // middleware.ts import { NextResponse } from 'next/server' import type { Next.. 2023. 7. 11. Next.js Docs (11) Route Handlers Route Handlers Route Handlers를 사용하면 Web Request 및 Response API를 사용하여 지정된 route에 대한 커스텀 request handlers(사용자 지정 요청 handler)를 만들 수 있다. * 알아두면 좋은것 : Route Handler는 app 디렉토리 내부에서만 사용할 수 있다. page 디렉토리 내부의 API Routes와 동일하므로 API Routes와 Route Handler를 같이 사용할 필요는 없다. Convention Route Handlers는 app 디렉토리 내의 route.js 파일안에 정의된다. // app/api/route.ts export async function GET(request: Request) {} Route Handle.. 2023. 7. 8. Next.js Docs (10) Intercepting Routes Intercepting Routes Intercepting Routes(경로 가로채기)는 현재 페이지의 context를 유지하면서 현재 레이아웃 내에서 route를 로딩할 수 있다. 이 라우팅 패러다임은 특정 route를 "가로채서" 다른 route를 표시할 때 유용하다. 예를 들어 피드 내에서 사진을 클릭할 때 피드 위에 뜨는 Modal이 사진과 함께 표시되어야 한다. 이 경우 Next.js는 /feed route를 가로채고 이 URL을 "mask"하여(가장하여?) /photo/123을 대신 표시한다. 그러나 공유 가능한 URL을 클릭하거나 페이지를 새로 고침 하는 등 직접 사진으로 이동할 때는 Modal 대신 전체 사진 페이지가 렌더링 되어야 한다. route 가로채기가 발생하면 안된다. Conven.. 2023. 7. 5. Next.js Docs (9) Parallel Routes Parallel Routes Parallel Routes(병렬 라우팅?)를 사용하면 동일한 레이아웃에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링 할 수 있다. 소셜 사이트의 대시보드 및 피드와 같은 앱의 동적인 섹션의 경우 Parallel Routing을 사용하여 복잡한 라우팅 패턴을 구현할 수 있다. 예를 들어 다음과 같이 team 및 analytics 페이지를 동시에 렌더링 할 수 있다. Parallel Routing을 사용하면 개별적으로 스트리밍되는 각 route에 대해 개별적인 오류 및 로딩 상태를 정의할 수 있다. 또한 Parallel Routing을 사용하면 인증 상태와 같은 특정 조건에 따라 슬롯을 조건부로 렌더링 할 수 있다. 이렇게 하면 동일한 URL에서 완전히 구분된 코드를 사.. 2023. 7. 2. 이전 1 2 3 다음
