위와 같은 페이지에 리스트 데이터가 렌더링 되기 전까지 스켈레톤을 보여주려고 한다. Next.js에서도 React와 마찬가지로 Suspense를 사용하여 Skeleton UI를 적용할 수 있다. Skeleton 컴포넌트 구현하기(app/components/Skeleton.tsx)import styles from '@/styles/skeleton.module.scss'interface SkeletonProps { w: number h: number radius?: number wUnit?: string style?: React.CSSProperties}export default function Skeleton({ w, h, wUnit = 'px', radius = 8, style,..
서버 컴포넌트에서 api 요청 결과에 따라 redirect 경로를 설정하는 코드가 있었는데 try-catch로 감싸줬더니 오류가 발생했다. Error: NEXT_REDIRECT at getRedirectError (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/redirect.js:49:19) at redirect (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/redirect.js:60:11) at ... Next.js 공식 문서에 따르면 redirect가 NEXT_REDIRECT 오류를 발생시켜 try-catch 블록 내에서 사용하면 에러에 잡..
Next.js로 만든 프로젝트에서 SEO 최적화를 작업해 보고 구글과 네이버에 사이트를 등록해 보았다. 1. Metadata 설정하기Next.js 공식 문서를 참고하여 Metadata를 설정한다.검색 결과에 포함되지 않길 원하거나, 페이지 내 포함된 다른 링크가 검색 결과에 포함되지 않게 하려면해당 페이지 내 metadata.robots의 index, follow 옵션을 수정한다. 기본은 index, follow 모두 true이다. 필요에 따라 Caronical Tag 등을 추가한다. - Open Graph 설정 Next.js에서는 Open Graph를 설정하지 않아도 기본적으로 title과 image를 설정해 준다. title의 경우 페이지의 title과 동일하게 설정되고 이미지는 페이지 내에 이미..
프로젝트에서 위와 같이 한 페이지 당 50개의 책 정보를 담고 있는 도서 목록 조회를 구현하고 있었다. 그런데 페이지 당 50개가 있다보니 PC의 경우는 괜찮았지만 모바일 환경에서는 다시 위로 올라가려면 많은 스크롤을 해야 했다. 여러 페이지에서 목록 조회가 이루어지고 있었기에 같은 문제가 여러 곳에서 존재할 수 있었다. 그래서 여러 모바일 사이트 및 앱에 존재하는 스크롤의 위치가 어느 정도 밑으로 내려가면 클릭 시 최상단으로 이동할 수 있는 버튼을 제공하기로 했다. 간단하게 버튼 스타일링을 하고,.scroll-btn { width: 50px; height: 50px; border-radius: 50%; $bottom: calc(env(safe-area-inset-bottom) + 15px); ..
인증이 필요한 API 요청엔 헤더에 토큰을 담아서 보내야 한다. 그런데 기존 로컬 스토리지에 보관했던 토큰을 서버 컴포넌트에서는 사용할 수 없는 문제가 있었다. 서버 컴포넌트에서는 로컬 스토리지, 세션 스토리지와 같은 브라우저 저장소에 접근할 수 없기 때문이다. 서버 컴포넌트에서는 `cookies` 함수를 이용하여 쿠키에 접근할 수 있었다. (단, 쿠키의 get, has와 같은 메서드는 서버 컴포넌트에서 사용할 수 있지만 set 메서드는 오직 Server Action과 Route Handler에서만 사용할 수 있다. 이는 HTTP가 스트리밍이 시작한 후에는 쿠키를 설정할 수 없게 하기 때문이다.) 서버 컴포넌트와 클라이언트 컴포넌트 모두에서 토큰을 사용하려면 서버 컴포넌트에서는 쿠키에서, 클라이언트 컴..
Next.js는 데이터 캐싱을 지원한다. Next.js의 'fetch'는 기존 Web 'fetch' API를 확장하여 구현한 것으로 기본적으로 응답 데이터를 캐시한다. 이때 캐시된 데이터는 Data Cache에 저장된다. fetch 함수의 두 번째 인자로 'cache' 또는 'revalidate' 속성을 추가하면 데이터 캐시 옵션을 바꿀 수 있다.또는 route segement config를 설정하여 특정 route segment에 존재하는 모든 'fetch'에 대한 캐시 옵션을 설정할 수 있다. Next.js는 fetch 데이터뿐만 아니라 라우트도 캐싱한다. Full Route Cache(서버)와 Router Cache(클라이언트)에서 캐싱된다. Full Route Cache는 정적 렌더링 된 라..
Next.js 공부용으로 가볍게 만든 프로젝트 작업물을 Vercel로 배포해 보았다! GitHub Repository와 연동하면 자동으로 배포가 된다. 놀랍게도 내가 push만 해도 알아서 다시 빌드를 해준다. 너무나도 편하고... 좋았다. 바로 직전에 aws 배포를 연습해 봐서 그런가 vercel의 배포 과정은 너무너무 간단했다ㅠㅠ 배포 시 주의해야 할 점은 Vercel의 Node 버전과 로컬의 Node 버전을 맞춰주어야 한다는 것이다. Vercel은 최신 Node 버전이 18 버전이다. +) .env 파일에 있는 환경 변수들을 Vercel에선 접근할 수 없으므로 프로젝트 Settings에서 설정해줘야 한다. 환경별로 변수를 설정할 수 있다! 백엔드도 개발했을 경우에는 추가 설정이 필요하다. 1) DB..
NextAuth로는 다양한 소셜 로그인(OAuth) 및 커스텀 로그인을 구현할 수 있다. Credential Providers를 통해 커스텀 로그인을 구현해 보았다. NextAuth는 기본적으로 로그인 페이지를 제공해 준다. 하지만 그대로 사용하기엔 개발 중인 웹의 테마와 어울리지 않는다. 그래서 커스텀 로그인 페이지를 만들어서 적용해 주었다. 1. [...nextauth].ts 코드 수정 // pages/api/auth/[...nextauth].ts import { connectDB } from '@/util/database' import NextAuth from 'next-auth' import CredentialsProvider from 'next-auth/providers/credentials' ..
1. MongoDB Atlas에서 DB 셋팅하기 1) 프로젝트 생성 프로젝트 이름 입력 후 다음 클릭 프로젝트에 멤버를 추가할 수 있는데 현재 나는 혼자 진행 중이기에 패스하고 생성 버튼을 클릭했다! 2) Database 생성하기 Build a Database 클릭 무료로 사용하기 위해 마지막 옵션 선택 지역을 선택한다. 현재 내 위치에서 가장 가까운 곳으로 설정해야 한다고 한다! Cluster 이름까지 기입하면 끝! (나는 이름을 뭐라고 해야 할지 모르겠어서 기본값으로 설정해 둔다...) 3) Database Setting 빌드를 마친 후, 왼쪽 사이드바에서 Database Acess로 들어가 DB 사용자를 추가한다. 아이디와 비밀번호를 설정하고, Built-in-Role을 Atlas admin으로 설..
1. Prettier 설치 npm install --save-dev prettier 2. .prettierrc.js 파일 추가module.exports = { semi: false, singleQuote: true, trailingComma: 'all',}semi: 세미콜론(;) 추가 여부, Next.JS는 기본적으로 세미콜론을 사용하지 않는다.singleQuote: 작은 따옴표(') 사용 여부, Next.JS는 기본적으로 작은 따옴표를 사용한다.trailingComma: 변경 사항을 최소화를 위해, 콤마(,)를 추가할 수 있으면 마지막에 콤마를 추가 3. 스크립트 설정 (package.json) "scripts": { … "format": "prettier --check --igno..
