seopport.log

1. font 폴더를 생성하고 다음과 같이 작성합니다.import localFont from 'next/font/local';export const pretendard = localFont({ src: [ { path: './PretendardVariable.woff2', weight: '400' }, { path: './PretendardVariable.woff2', weight: '700' } ], variable: '--font-pretendard'}); 2. tailwind config의 extend에 다음과 같이 추가합니다. fontFamily: { pretendard: ['var(--font-pretendard)'] ..

process.env.로 환경변수를 불러올 때 undefined가 뜨는 문제 기본적으로 Next의 환경변수는 node 환경의 서버사이드에서만 불러올 수 있다고 한다. 해결법으로는 환경변수 이름 앞에 NEXT_PUBLIC_을 붙여주면 브라우저 환경에서도 환경변수를 읽을 수 있다 env.local과 env.production build 명령어를 사용하면 env.production 파일이 우선적으로 적용된다. 따라서 env.local에는 NEXT_PUBLIC_BASE_URL에 로컬호스트 주소를 넣어주고, env.production에는 배포 주소를 넣어주면 빌드, 배포시 env.production의 NEXT_PUBLIC_BASE_URL을 읽어 배포주소를 베이스 주소로 사용하게 된다.

라우트 핸들러를 활용한 서버 사이드에서의 결제 승인 처리🤔 문제 상황<ul style="list-style-type: disc; background-color: #ffffff; color: #0d0d0d; text-align: start;" data-ke-list-type="disc"..

SSG 빌드 타임에 페이지를 만들어놓고 요청이 들어오면 만들어 둔 페이지를 전송해줌 SSR 사용자가 페이지를 요청할 때마다 서버에서 페이지를 새로 만들어서 줌 ++ 여기서 서버는 Next.js 자체 웹 서버 ISR SSG의 단점을 보완한 렌더링 방식 revalidate 시간이 10초라고 가정! 10초 동안 호출되는 모든 요청은 캐시된 데이터를 반환한다. => 10초동안 백만명이 접속해도 새로운 요청 X 10초가 지난 후 Next가 데이터를 성공적으로 가져오면 데이터 캐시를 새로운 데이터로 업데이트하고, 데이터를 가져오지 못하면 기존 데이터로 유지된다. 10초가 지나도 새 요청이 없으면 서버는 페이지를 자동으로 재생성하지 않는다. 다음 페이지 요청이 발생할 때까지 기다리고 10초가 지난 이후에 요청이 발생..

문제 상황 웹 페이지를 클라이언트 컴포넌트로 구성하고, useSearchParams 훅을 사용해 쿼리스트링 값을 받아 서버 컴포넌트에 props로 내려주려 함. 서버 컴포넌트에서 이 props를 사용해 데이터를 fetch하려 했으나, 클라이언트 컴포넌트에 서버 컴포넌트를 임포트하면 서버 컴포넌트도 클라이언트 컴포넌트가 되버려서 서버 컴포넌트의 로직이 정상적으로 실행되지 않음. 페이지를 서버 컴포넌트로 설정하는 것이 맞다고 판단됨. 그럼 어떻게 서버 컴포넌트에서 쿼리스트링 값을 어떻게 가져오지? 해결 방법 useSearchParams 훅 등을 사용하지 않고, 페이지에서 쿼리스트링 값을 직접 함수의 props로 받는 방식으로 문제를 해결할 수 있었다. export default async function R..

위 사진을 보면 화질이 뭔가 묘하게 안좋은 느낌이있다. img태그를 사용했을때는 원본 화질이 잘 나왔는데, 넥스트의 이미지태그로 수정하니 화질이 떨어졌다. 해결 방법은 Image태그에 quality 속성을 지정하는것 기본값이 75이고, 100으로 지정해주면 원본과 같은 화질로 출력된다. 위 사진보다 확실히 화질이 좋아진 것을 확인할 수 있다.

1. queryProvider 생성 및 RootLayout에 적용 'use client'; import React from 'react'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; const QueryProvider = ({ children }: React.PropsWithChildren) => { const queryClient = new QueryClient(); return {children}; }; export default QueryProvider; //RootLayout export default function RootLayout({ children, }: Readonly) { return ( {chi..

리액트를 쓸때는 라우터의 Link 태그에 기본적으로 active 클래스가 내장되어 있기 때문에 간편하게 active 스타일링을 지정할 수 있었다. 하지만 Next의 Link 태그에는 그러한 기능이 없기 때문에 pathName을 이용해서 네비게이션 바를 구현해보게 되었다. 처음에는 useState를 사용해서 네비게이션바의 아이템을 클릭하면 아이템과 state를 비교하여 조건부 스타일링을 구현했었는데, 그렇게 하니까 사용자가 네비게이션바가 아닌 다른 버튼을 통해 다른 페이지로 이동했을 때 네비게이션 바에는 반영되지 않아 문제가 있던 상황이었다. 원했던 것은 사용자가 현재 위치한 페이지가 navBar와 동기화되는 것이었다. 1. Nav Bar 생성 우선 네비게이션 아이템 리스트를 만들고 map으로 링크를 생성..

SSG는 한번 캐시된 데이터를 계속해서 가지고 있기 때문에 수정 내역이 반영되지 않는 것이 맞지만, json server에 오타가 있어서 서버 데이터를 수정하고, dev 서버와 json 서버를 껐다 켜보고 별 짓을 다했는데도 수정 내역이 반영이 안되어서 삽질을 했다 해결방법은 이러했다. .next 폴더 밑에 cache - fetch-cache에 서버에서 가져온 캐시가 들어있다. 저 405f69c7... 파일이 서버의 데이터의 캐시를 가지고 있었다. 그래서 저 파일을 삭제하고 서버를 다시 구동하니 정상적으로 수정내역이 반영되었다. 🥲

1. Next에서 제공하는 Image 태그 임포트 import Image from 'next/image'; 2. 이미지 속성 정의 Next에서는 이미지 최적화 기능을 지원하고 있기 때문에 width, heigth 속성을 지정해주지 않으면 오류가 난다. 3. next.config.mjs 설정 만약 이미지 주소가 'https:/i.ibb.co/L0CSxK9/image.png' 라면 다음과 같이 작성하면 된다. const nextConfig = { images: { remotePatterns: [ { protocol: 'https', hostname: 'i.ibb.co', pathname: '/L9CSxK9/image.png', }, ], }, }; 만약 도메인만 작성하고 싶다면 pathname을 생략하면 된..