nextjs 검색 결과

해당 글 10건

NextJS 페이지 라우터에서 모든 페이지 라우트 확인하는 방법

NextJS 페이지 라우터에서 모든 페이지 라우트 확인하는 방법.페이지 라우터는 page 디렉터리 구조에 따라 자동으로 라우트가 생성됩니다.프로젝트의 모든 라우트를 알아야 하는 필요성이 생겨 구현하였습니다.코드type Page = string;export const getStaticProps: GetStaticProps = async () => { const pagesDir = path.join(process.cwd(), 'pages'); const pages = getAllPages(pagesDir); return { props: { pages, }, };};function getAllPages(dir: string, basePath: string = ''): Page[] {..
공유/React, Next 2024. 10. 16. 18:33

Next에서 특정 페이지에 사용자가 머무는 시간 측정 방법

구글 애널리틱스(GA)를 이용하여 해결할 수 있습니다. 그러나 자체적으로 관리하기 위해 커스텀 훅을 구현하였습니다.학습 개념Next.js 페이지 로드 이벤트Next.js 페이지 이탈, 종료 이벤트Next.js 새로고침 이벤트usePageStayDurationusePageStayDuration 훅은 사용자가 현재 페이지에 머무는 시간을 측정하는 기능을 제공합니다.이 훅은 Next.js의 라우터 이벤트를 활용하여 페이지 전환 및 새로 고침 시 머무른 시간을 기록합니다.아래에서 이 훅의 동작 방식과 구현 세부 사항을 설명하겠습니다.코드먼저 구현된 코드를 확인해보도록 하겠습니다.import { useRouter } from "next/router";import { useEffect, useRef } from "..
공유/React, Next 2024. 10. 16. 18:30

Storybook 연동하기

Storybook 연동하기컴포넌트를 쉽게 확인하고 관리할 수 있는 좋은 방법은 Storybook을 사용하는 것입니다.이번 포스트에서는 Next.js 14와 Emotion을 활용해 Storybook을 연동하는 방법을 알아보겠습니다.Storybook 설치먼저, Storybook을 설치합니다. 아래 명령어를 실행하세요.npx storybook@latest init설치가 완료되면 여러 개의 프로토타입 코드와 이미지가 생성됩니다.이 과정이 끝나면, .storybook 폴더를 제외한 모든 파일을 삭제해 주세요.단, stories 폴더는 남겨둡니다. 이 폴더에 앞으로 컴포넌트의 Story 파일을 작성할 예정입니다.지금까지 코드 확인하기Emotion 연동프로젝트에서 Emotion을 사용 중이라면, Storybook에 ..
개인 프로젝트/React 컴포넌트 구현하기 2024. 9. 23. 19:14

Typography 컴포넌트 구현하기

Typography 컴포넌트 구현하기Typography 컴포넌트는 텍스트를 보여주기 위한 컴포넌트입니다.일반적으로 HTML에서 텍스트를 표시할 때는 span 또는 p 태그를 사용합니다.제가 구현한 Typography 컴포넌트는 기본적으로 span 태그를 사용하지만, 사용자가 필요에 따라 p 태그로 변경할 수 있도록 유연하게 설계되었습니다.Typography 구현하기propsinterface TypographyProps { color?: TypographyColor; align?: "inherit" | "center" | "right" | "left"; variant?: TypographyVariant; noWrap?: boolean; component?: ElementType; children..
개인 프로젝트/React 컴포넌트 구현하기 2024. 9. 23. 18:59

React(Next) + Emotion로 MUI 따라 만들기

React로 개발할 때 UI 라이브러리를 사용하면 빠르게 구현할 수 있지만, 커스터마이징이 복잡하고 시간이 많이 소요되는 단점이 있습니다.이를 해결하기 위한 headless 컴포넌트 라이브러리도 있지만, 인력과 시간이 충분하다면 직접 구현하는 것도 좋은 대안이 될 수 있습니다.사이드 프로젝트로 도전해 보는 것도 의미 있을 것 같아 시작하게 되었습니다.개발 환경개발 환경은 NextJS 14 + Emotion입니다.CRA 대신 Next 14를 사용하고 싶었고, 아직 SSR에서 정상 동작하지 않습니다.따라서 "use client"를 추가해야 하지만, 익숙한 Emotion을 계속 사용하기로 했습니다. NextJS14 + Emotion 개발환경 셋팅하기NextJS14와 emotion을 이용하여 개발환경을 셋..
개인 프로젝트/React 컴포넌트 구현하기 2024. 9. 19. 19:14

[Next] 14버전에서 Link와 a를 같이 사용하는 방법

[Next] 14버전에서 Link와 a를 같이 사용하는 방법NextJS 14버전에서 Link와 a element를 같이 사용하고 싶은 경우가 있습니다. {name}위처럼 코드를 작성하였는데 아래 에러가 발생하였습니다.Error: Invalid with child. Please remove or use .Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor해결방법 1a element를 삭제한다.그러나 이 방법은 제가 원하는 방법이 아니었습니다. {name}해결방법 2legacyBehavior props를 추가한다. {name}해결방법 2로 수정하였습니다.
에러 모음/React 2024. 7. 12. 08:50

[Next] dynamic, lazy import 시 발생하는 에러

[Next] dynamic, lazy import 시 발생하는 에러하고자 한 것icon을 볼 수 있는 페이지를 구현하려고 했습니다.로직 순서는 아래와 같습니다.[Server] icon이 있는 폴더를 읽는다.[Server] .tsx 확장자만 필터링하여 배열로 데이터를 만든다.[Front] 서버에서 받은 데이터를 활용하여 렌더링을 한다.서버에서 데이터를 생성 후 프론트에게 전달하면 프론트에서 lazy import로 렌더링 하는 순간 읽으려고 하였습니다.그 이유는 icon을 추가할 때마다 ICONS 배열을 변경하는 것은 불필요한 작업이라고 생각했기 때문입니다.서버에서 만든 데이터 구조const ICONS = [ { name: "AddIcon", src: "../../icon/Ad..
에러 모음/React 2024. 7. 10. 13:07

[NextJS] 동적 routing 작업하기

[NextJS] 동적 routing 작업하기 이번 게시글에서는 동적 routing 작업을 해보겠습니다. 동적 routing 우리가 하고자 하는 것은 /details/과일이름 url을 만들고 해당 url에 접속하면 해당 컴포넌트가 보여지는 것입니다. 여기서는 apple, banana, orange가 있다고 가정해보겠습니다. 그럼 pages/details 폴더 아래 apple. banana, orange 파일을 만들어 주어야 합니다. 아래 이미지를 참고해봅시다. 해당 컴포넌트 코드도 확인해보겠습니다. apple.js코드는 아래와 같습니다. (나머지 동일 패턴) export default function Apple() { return Apple 페이지; } 그렇다면 해당 url에 접속하기 위한 header m..
기타 (+ Legacy)/Legacy 2022. 3. 28. 05:33

[NextJS] routing, 공통 layout 작업

[NextJS] routing, 공통 layout 작업 이번 게시글에서는 NextJS에서 routing 작업을 하는 방법, 공통 layout을 잡는 방법을 알아보도록 하겠습니다. (css 설명은 없습니다.) routing & 공통 layout ◆ routing NextJS에서 routing 작업 하는 방법은 매우 간단합니다. 그냥 pages 폴더 아래 폴더 및 파일을 내가 원하는 url 형식으로 생성해주면 됩니다. 예를들어 /test/intro/a 와 같은 url을 만들고 싶으면 pages 폴더 아래 test 폴더 -> intro 폴더 -> a.js 파일을 만들면 됩니다. 그럼 해당 url로 접속할 경우 a.js 컴포넌트가 보여집니다. 그럼 예시로 /intro url를 생성해봅시다. 아래 이미지와 같이 ..
기타 (+ Legacy)/Legacy 2022. 3. 25. 05:54

[Next.js] Next.js 소개

[Next.js] Next.js 소개 Next.js는 React Framework 입니다. Next.js는 CSR인 react를 보다 더 쉽게 SSR이 가능하도록 도와줍니다. SSR이 가능하면 SEO에 더 유리하게 됩니다. 그 뿐만이 아니라 SSR, SSG, CSR 중 내가 원하는 방법으로 렌더링 방식을 정할 수 있습니다. 또한 routing 작업, 404 page 등 보다 더 다양한 기능을 쉽게 사용할 수 있습니다. 해당 카테고리에서는 nextjs에 대해 알아보고 SSR, SSG, CSR을 nextjs로 하는 방법을 알아보겠습니다. Next.js 개발 환경 셋팅 우선 nextjs 개발 환경을 셋팅해보도록 하겠습니다. 설치 명령어 : npx create-next-app project-name 설치 명령어..
기타 (+ Legacy)/Legacy 2022. 3. 24. 05:37