'nextjs' 태그의 글 목록

2024.06.13· 개발/Next.js

shadcn ui 에서 제공하는 Drawer DrawerA drawer component for React.ui.shadcn.com shadcn ui 에서 제공하는 Drawer 의 방향은 아래에서 위로 올라온다. 팝업 형태로 띄우는 것도 예시로 보여주기는 하지만 나는 커스텀해서 오른쪽에 스무스~ 하게 나오게 구현해야하는 상황이였다. 그리고 현재 상황에서는 오른쪽에서 나오는거지만 디자인이 바뀌면 또 어떻게 될지 모르는 상황이기 때문에 direction을 변수로 넣어서변경할 수 있는 방향을 찾았다. shadcn/ui는 번들되지 않은 컴포넌트 소스 코드를 프로젝트에 의존성으로 추가하지 않고, 말 그대로 복붙해서 컴포넌트 코드를 온전히 사용할 수 있다. 이 포인트가 중요하다. 디펜던시에 들어가는게 아니..

Nextjs14 + nextui를 사용해서 progress bar 만들기

2024.06.05· 개발/Next.js

개인적인 필요로 인해서 만들기 시작했던 타임 트래킹 웹. 독서하는 시간을 만들어보고 측정해보겠다고 시작한 것이였는데 지난 달 기록과 현재의 기록 비교 / 또는 목표 시간을 정해두고 현재 얼마나 이뤘는지 체크하는 부분까지 더 해보고 싶어졌다. 그 표현을 progressbar로 하면 직관적일 것 같다고 생각했고, nextui를 사용해서 간단하게 적용해보기로 했다. 👇🏻 NextUI 공식문서 https://nextui.org/ NextUI - Beautiful, fast and modern React UI LibraryBeautiful, fast and modern React UI Librarynextui.org nextui를 적용하기 위해서는 공식문서를 보면 굉장히 빠르게 해결할 수 있다. 굉장히 ..

[Nextjs] Route segment 'force-dynamic' 가 필요할 때

2024.03.29· 개발/Next.js

프로젝트 구현을 진행하면서 새로운 페이지를 만들었다. 서버에 저장되어있는 데이터를 가져오기 위해서 이미 만들어져있던 데이터 호출 코드들을 그대로 재활용해서 진행을 했는데 개발모드에서는 괜찮았지만 빌드만 하면 계속해서 오류가 났다. 정확히는 정적 렌더링하는 페이지에서 계속 오류가 나는 상황 데이터를 불러올 때 호출한게 서버API를 따로 만든게 아니라 nextjs가 지원하는 api route를 이용해서 severless 한 함수로 구현했다. 참고로 API 라우트를 사용하면 Next.js 어플리케이션에서 외부 데이터를 가져오거나 데이터베이스와 상호작용할 수 있다. 이 부분을 이해하기 위해서는 nextjs의 서버 렌더링에 대해서 알 필요가 있다. nextjs 서버 렌더링에는 총 3가지가 있는데, 첫번째 Stat..

vercel로 Nextjs 배포하기

2024.01.05· 개발/Next.js

최근 nextjs로 구현한 프로젝트를 배포할 방법을 찾다가 vercel로 호스팅 서비스를 해주기에 한 번 써봐야겠다며~~ 도전했습니다. vercel 홈페이지에서 로그인하기 https://vercel.com/ Dashboard – Vercel vercel.com start deploying 버튼이 보이시죠? 클릭클릭 - 이렇게 git repository를 가져올 수 있게 하는 부분이 있습니다. 저는 다 가져오지는 않고, 배포할 레포지토리만 가져왔습니다. 배포작업을 할 프로젝트상세로 들어가서 아래의 내용을 적어주시면 되는데, 따로 프로젝트 package.json에서 설정한 부분이 없으시다면 크게 수정할 부분을 없으실거에요. root directory같은거 잘 체크해주세요 저는 처음에는 아래의 캡쳐처럼 다 채..

Next.js14에서 useRouter 사용하기

2024.01.03· 개발/Next.js

nextjs12 를 쓰다가 nextjs14로 급 점프를 하다보니 새로운 것들이 꽤 눈에 들어왔다. 해당 내용은 nextjs13 이후에도 적용이 되는 내용이다. 페이지를 리로드하려고하는데, reload() 함수가 없어진것 아니겠는가! 그래서 공식문서를 찾아들어갔다. 공식문서 원본을 좀 가져와봤다. useRouter() router.push(href: string, { scroll: boolean }): Perform a client-side navigation to the provided route. Adds a new entry into the browser’s history stack. "use client" 를 사용한 client-side로 route를 제공할 때 사용 router.replace(hr..

npm start, npm run dev 의 차이점

2023.12.29· 개발/Next.js

nextjs 프로젝트를 할 때는 npm run dev를 react 프로젝트를 할 때는 npm start로 개발모드를 런한다. 왜 프로젝트에 따라서 명령어가 다를까? 라는 생각이 들었다. 물론 package.json에 설정된 값에 따라 다르다는게 중요하지만 어쨋든 프로젝트마다 쓰는 라이브러리, 프레임워크에 따라서 디폴트 값이 다르다는 것! Nextjs _ package.json next dev ⇒ 개발 모드에서 실행 next build ⇒ 프로덕션 빌드 용도로 애플리케이션 빌드 next start ⇒ Next.js 프로덕션 서버 시작 next dev 명령어가 실행됩니다. 이 명령어는 개발 서버를 시작하고 Next.js 애플리케이션을 실행 next dev 명령어는 .next 디렉토리를 생성하고, Next.j..

[Nextjs] dynamic routing 새로고침시 데이터 소실 에러

2023.09.26· 개발/❌ 오류 노트

지난 번에 마주했던 Nextjs 라우팅 문제는 이제 해결 된 듯 했다. 관련 에러 포스팅 보러가기 (👉🏻 https://mindevlog.tistory.com/191) 또 다른 라우팅 문제가 발견되었다. 정적 라우팅은 cloudFront로 해결을 봤는데, 이번엔 동적 라우팅이 문제였다!😔 어떠한 게시판의 게시물 상세로 들어갈 때 , `/file/[id]` 이런식으로 동적라우팅(dynamic routing) 처리를 하고 있다. 브라우저에서 새로고침(refresh)를 하면, 해당 상세 페이지에 출력되어있던 모든 데이터들이 사라지고, 심지어 html 역시 출력 못하고 기본페이지로 보내버리는 것 아닌가... 방법을 찾아서 AWS cloudfront 함수를 다시 작성도 해보고, lambda를 써야한다 - next..

[Next.js (SSG) /cloudFront] 배포 이후 reload시에 dynamic route를 못 할 때 해결

2023.08.07· 개발/Next.js

문제상황 NextJS로 빌드한 이후에 브라우저에서 reload를 하면 페이지 경로를 제대로 찾지 못 하고 초기화면으로 보내버리는 오류가 생겼다. 최종 서비스를 앞두고 이 문제로 꽤나 골머리를 썩고 있었다. 원인 브라우저에서 요청한 주소와 실제 리소스의 주소(URL)이 달라서 생긴 일인데, 이게 로컬에서는 잘 돌아가기 때문에 처음에 정말 무슨 일인지 알수가 없었다. static을 S3에 올리면서 생기는 문제로 nextjs는 디렉토리를 기반으로 라우팅을 하는데, 이걸 static이 생성된다. 이대로 배포하면 기본 url 에서는 문제가 없지만 뒤에 디렉토리가 붙는 경우에 문제가 생긴다. 해결 1. next.config에 trailingSlash 옵션 넣어주기 // next.config.js module.exp..

NextJs 와 TypeScript 환경에서 Jest , React-Testing-Library 셋팅하기 (삽질오지게함...)

2022.10.28· 개발/Next.js

업무를 보면서 현재 진행 중인 프로젝트의 코드를 조금 더 개선시키고 앞으로의 작업을 편하게 가져가기 위해서 어떤 일들을 할 수 있을까? 하는 생각을 하다가 테스트 코드 셋팅을 해보자라는 다짐을 하게 되었다. 현재 진행 중인 코드에서는 할 수 없기 때문에 비슷한 환경을 조성한 테스트 코드를 가지고 시험 삼아서 테스트 개발환경을 조성하려고 시도했다. 웬걸? 삽질을 이틀 사흘 동안 하고 끝냈다. 하지만 여전히 미궁에 빠져있고 이걸 다시 재연해낼 수 있을까? 하는 의문이 강하게 들어서 다급하게 이곳에 남겨보려고 한다. 맨날 듣기만하고 여기저기 구글링 하다가 보기만 했지. 정작 써본 적은 없는 테스트 코드. 여러 블로그를 참고해서 진행을 했었는데, 뭐하나 제대로 이해하는 게 없으니 코드는 완전 짬뽕이 되고 tes..

[NextJS] SSR 공부하기 (Static Generation vs Server-side Rendering)

2022.06.07· 개발/Next.js

▪ React는 NextJS를 이용해서 SSR을 할 수 있습니다. ▪ Static Generation vs Server-side Rendering pre-rendering(사전렌더링) 기본적으로 모든 페이지 pre-render - 사전에 HTML 파일들을 만든다는 의미로 퍼포먼스를 향상시키고 SEO에 최적화된답니다. Javascript을 끄고 페이지를 렌더링을 해도 HTML이 렌더링되기 때문에 기본 페이지가 로드됩니다. 여기서 Javascript을 복원시켜주면 hydration이 된다고 합니다. 정적인 페이지가 동적으로 바뀌는 것을 의미합니다 Static Generation : 정적생성 vs Server-side Rendering : 서버 사이드 렌더링 이 두 가지의 차이점은 언제 HTML 을 만드냐입니..

[NextJs] Project Clone 후에 npm run build -> SWC Failed to Load

2022.06.02· 개발/❌ 오류 노트

{ "presets": ["next/babel"] } github에서 프로젝트를 클론한 후에 npm install하고 npm run build를 하는데, SWC failed to load 오류가 났다. 그리고 https://nextjs.org/docs/messages/failed-loading-swc 여기를 방문해보라는 메세지가 떠서 봤더니 node modules과 package-lock.json을 지우고 다시 npm install을 하거나, 그래도 오류가 계속되면 .babelrc파일을 만들어라고 했다. 첫번째 노드 모듈을 지웠는데도, 다른 오류가 또 생겨서 프로젝트 자체를 다시 클론 받고, babelrc 파일을 만들어줬다! 아래와 같이 만들어주면 된다. 파일의 위치는 최상단이다! .babelrc { "..

티스토리툴바