restApi Class의 경우 x2bee-core에 있는 restApiUtil을 사용하여 동작합니다. 기본적인 사용법은 1번에서 설명하였던 restApiUtil과 모두 동일합니다. 단지 함수 이름은 조금 달라서 밑에서 표로 설명 하겠습니다. 1. Server Component 서버 컴포넌트의 경우 기본적으로 get만 있을 경우가 높아서 get만 코드를 설명하였습니다. import { restApi } from '@/lib/common/plugins/restApi'; const SearchPage = async () => { const options = { headers: { Cookie: 'site_no2=1;', }, }; const data = await restApi.get( 'http://loc..

Next.js는 여러 언어를 지원하기 위해 라우팅 및 콘텐츠 렌더링을 구성할 수 있게 해준다. 여러 locale에 대응하는 사이트를 만들기 위해서는 번역된 콘텐츠(localization)와 internationalized routes가 포함된다. Middleware (/src/middleware.ts) 미들웨어는 클라이언트의 요청에서 locale 을 추출하고, 이에 따라 적절한 리디렉션 또는 리라이트를 수행한다. 만약 클라이언트가 /about에 대한 요청을 하고 locale이 en으로 설정되어 있다면, 미들웨어는 이를 /en/about으로 리디렉션하거나 리라이트할 것이다. 이러한 처리를 통해 사용자는 적절한 언어로 번역된 페이지로 리디렉션되거나 리라이트되어 효과적으로 국제화된 콘텐츠를 제공받을 수 있다...

Dynamic Routes Dynamic Routes는 관행적으로 [slug]라는 이름으로 많은 상품명에 따라 동일한 레이아웃을 가져갈 때 사용됩니다. 반드시 slug라는 이름을 사용해야하는 것은 아니며, 가독성을 위해 아래는 categoryname이라는 이름으로 예시를 작성하였습니다. 다음 폴더 구조에서의 예시 └── category └── [categoryname] └── page.tsx page.tsx import React from "react"; const Page = ({ params }: { params: { categoryname: string } }) => { return ( {params.categoryname} ); }; export default Page; 브라우저에 http://l..

/x2bee-storefront src api common 공통 api display 전시 api event 이벤트 api goods 상품 api member 회원 api order 주문 api search 검색 api app (root) App router의 folder-based routing layout.tsx common layout (home) root 폴더 page.tsx Main Page display 예시) App router의 folder-based routing … 기타 folder-based routing my-cart 예시) MO 환경에서 Footer layout을 다르게 가져갈 라우트 layout.tsx 장바구니 layout (shopping-bag는 한섬 전용 용어라 my-car..

기존 개발 가이드 3번의 ESLint, Prettier 설정을 했을경우 vscode에서는 문제가 없었지만 IntelliJ에서는 정상동작하지 않는 문제가 발견되었다. 해당 문제 문제를 해결하며 알게 된 방법과 내용을 남기도록 하겠다. 1. 우선 plugin을 추가하였다. "eslint-plugin-prettier": "^5.1.2" 해당 플러그인은 lint 위에 사용할 prettier 기능을 추가해준다고 한다. 2. .eslintrc.json의 설정을 변경해주었다. AS-IS // 기존 방식 { "extends": [ "next/core-web-vitals", "standard", "plugin:tailwindcss/recommended", "prettier" ], "rules": { "no-undef":..

메타데이터는 SEO 및 공유성에 매우 중요하다. 이 장에서는 Next.js 애플리케이션에 메타데이터를 추가하는 방법에 대해 설명한다. 이번 장에서 다룰 주제는 아래와 같다. 메타데이터란? 메타데이터 유형. 메타데이터를 사용하여 오픈 그래프 이미지를 추가하는 방법 메타데이터를 사용하여 파비콘을 추가하는 방법 메타데이터란? 웹 개발에서 메타데이터는 웹페이지에 대한 추가 세부정보를 제공한다. 페이지를 방문하는 사용자에게는 메타데이터가 표시되지 않는다. 대신 페이지의 HTML, 일반적으로 엘리먼트에 포함되어 뒤에서 작동한다. 이 숨겨진 정보는 웹페이지의 콘텐츠를 더 잘 이해해야 하는 검색 엔진 및 기타 시스템에 매우 중요하다. 메타데이터가 왜 중요한가? 메타데이터는 웹페이지의 SEO를 향상시키는 데 중요한 역할..