Next11 Next.js - vercel 배포하기 피그마 플러그인을 만드는 도중 Oauth 인증 과정에서 서버도메인이 필요하게 되었다.이전에 프론트 사이트로 몇번 배포했었는데, 기억이 가물가물..아카이브용으로 Next.js 로 만든 프로젝트를 vercel 배포과정을 정리해보았다(참고로 vercel 은 정적 페이지를 쉽게 빌드/배포 할 수 있는 호스팅 서비스를 제공하는 클라우드 플랫폼이다) Next.js - vercel 배포하기1. vercel 에 로그인을 하면 대시보드가 뜨고, add new 버튼 > project 를 선택해주자 2. 나는 이미 등록한 계정으로 깃 레포만 추가하는 거라 깃헙 앱 퍼미션을 클릭해주었다. 3. 모달 창이 뜨고, 로그인을 하고 나면 아래와 같은 세팅 페이지로 들어가게 된다. 스크롤 바를 굴려 아래로 내려가보자 4. 여기.. 2025. 5. 3. Next.js - GA4 pageview 추가하기 (Nextjs 셋업편) 사이드로 만들어 보았던 랜딩 페이지의 방문객이 어느정도 되는지 알고 싶었다.이러한 니즈로 방문객 수를 알아보고 싶으면 GA 를 프로젝트에 심어야 한다더라예전에 회사에서 전략팀이 주는 소스로 A/B테스트 정도로 코드에 심어서 테스트 요청을 해본 적은 있었지만GA 설정부터 시작해야한다. 분명 나같은 사람들이 많겠지. 그래서 직접 포스팅 해보려고 한다.해당 포스팅은 GA 페이지 내 설정 / Nextjs 프로젝트 내 설정 요렇게 두 파트로 나눠보았다. 지난 시간에는 GA 페이지 설정을 해보았고, 이번에는 Nextjs 프로젝트 내 설정을 해보려고 한다. GA 페이지 설정이 궁금하시다면 클릭👇👇👇 Next.js - GA4 pageview 추가하기 (GA 페이지 셋업편)사이드로 만들어 보았던 랜딩 페이지의 방.. 2025. 4. 1. Next.js - GA4 pageview 추가하기 (GA 페이지 셋업편) 사이드로 만들어 보았던 랜딩 페이지의 방문객이 어느정도 되는지 알고 싶었다.이러한 니즈로 방문객 수를 알아보고자 하였더니 GA 를 프로젝트에 심어야 한다더라예전에 회사에서 전략팀이 주는 소스로 A/B테스트 정도로 코드에 심어서 테스트 요청을 해본 적은 있었지만GA 설정부터 시작해야한다. 분명 나같은 사람들이 많겠지. 그래서 직접 포스팅 해보려고 한다.해당 포스팅은 GA 페이지 내 설정 / Nextjs 프로젝트 내 설정 요렇게 두 파트로 나눠보았다. Next.js - GA4 pageview 추가하기 (GA 페이지 셋업편) 1. 구글 계정으로 텅~ 비어있는 GA 페이지로 진입해보자. 메뉴 패널 > 어드민 메뉴로 들어가보자 2. create 버튼을 눌러 property 를 클릭! 3. property.. 2025. 3. 30. Strapi(2) ContentType 설정하기 Strapi 는 프론트에게 매우 유용한 CMS 이다 현재 진행중인 Next.js 프로젝트에 적용해보기 위해 스트라피를 이용해서 직접 API 를 만들어 보는 과정을 포스팅에 담았다 지난 시간에는 Strapi 를 설치하여 어드민 페이지까지 띄웠고, Strapi - 스트라피 설치하기 현업에서는 Strapi 를 사용하고 있다. 하지만 나도 사! 용! 하고 싶었다 그말인 즉슨 누군가가 차려놓은 밥상말고 나도 요리를 해보고 싶었다는 말과 동일하다 그래서 소원대로 Strapi 로 요리를 좀 devbirdfeet.tistory.com 이번 시간에는 어드민에서 Content-Type, 즉 인터페이스를 모델링하는 과정을 정리해보았다 다음시간에는 Content-Type 을 가지고 mock-up 데이터를 추가한 뒤 api 로.. 2024. 2. 29. Strapi(1) 스트라피 설치하기 Strapi 는 프론트에게 매우 유용한 CMS이다 특히 혼자서 프로젝트를 개발할때 말이다. 서버가 필요없이 바로 api 를 만들어 사용할 수 있는 것이 큰 장점이다 현업에서는 Strapi 를 부분적으로 사용하고 있다. 하지만 나도 사! 용! 하고 싶었다 그말인 즉슨 누군가가 차려놓은 밥상말고 나도 요리를 해보고 싶었다는 말과 동일하다 그래서 소원대로 Strapi 로 요리를 좀 해봤다 하지만 잘 꾸며진 정제된 과정 말고, 날것의 실행 과정을 그대로 올려보려고 한다 (누군가에겐 도움이 되길 바라며) Strapi (1) 스트라피 설치하기 터미널에서 설치 명령어를 실행해보자 # --quickstart 옵션은 default로 db를 sqllite을 사용한다 npx create-strapi-app@latest my.. 2024. 2. 23. Next.js - 서버 컴포넌트에서 useContext() 사용하기 넥스트js는 서버컴포넌트와 클라이언트 컴포넌트로 나뉘어진다 그렇기 때문에 React 기반의 훅들을 사용할 때는 한번더 생각해보아야 한다 오늘은 useContext() 를 어떻게 사용하는 지 알아볼 것이다 Next.js - 서버 컴포넌트에서 useContext() 사용하기 리액트에서 전역 변수를 전달하기 위해 redux / useContext 를 사용하였다 Next.js에서 useContext 를 사용하려고 하니 한가지 제약이 있었다 You are using createContext in a Server Component but it only works in Client Components → 바로 클라이언트 컴포넌트에서만 사용이 가능하다는 것이다 createContext in a Server Compo.. 2023. 12. 31. Next.js - Route 로 관리하는 모달 만들기 (URL 히스토리) updated 01/13/24 Next.js 로 포트폴리오 사이트를 만들면서 Route 로 관리되는 모달 (Route as Modal) 을 구현하고자 하였다 리액트로 같은 기능을 구현할 때 useHistory 로 구현하였던 기억이 있어 비슷하게 헤매일 줄(?) 알았는데 생각보다 훨씬 간단하였다 (머 - 쓱 😅) Next js 는 그만큼 라우터에 진심이라는 것을 다시한번 느끼며 그때의 감동을 정리해보았다 Next.js - Route 로 관리하는 모달 만들기 (URL 히스토리) 일단 처음 살펴봐야할 개념이 있다. Intercepting Routes 라는 개념이다. 이 친구에 대해 간단히 정리를 하면 원래의 주소의 화면과 다른 라우트를 가진 컴포넌트를 동시에 보여줄 수 있는 기능이다 This allows yo.. 2023. 12. 29. Next.js - global 구글 폰트 적용하기(next/font) 넥스트를 사용하며 전역적으로 폰트스타일을 추가하려고 한다. 폰트를 사용하는 방법은 두가지 정도가 있다. static한 내장 폰트를 사용하거나 웹 폰트를 사용하거나 내장 폰트는 다양한 브라우저 환경이나 운영체제에 따라 달라질 수 있다. (그래서 보통 웹 폰트를 많이 쓴다) 웹 폰트는 아무래도 외부 네트워크로 다운로드 해오다보니 다운로드할 동안 공백기(?)에 대한 이슈가 생긴다. → FOUT(기본 폰트가 나오고 로딩 후 웹 폰트로 대체) / FOIT(아무것도 안나오다 로딩후 웹 폰트로 대체) 지난번 리액트 사용하면서 폰트 프리로드하는 최적화를 진행해본적이 있다 그때는 급하게 찾아서 했었는데 이번 플젝을 진행하며 어떤 원리로 왜 이런 과정을 거치는 지의 인사이트가 한번 더 넓혀진 것 같다 웹 최적화 - 구글 .. 2023. 8. 17. Next.js - SVG 사용해서 컬러, 사이즈 변경하기 (Feat.svrg) Next.js 로 프로젝트를 하면서 컴포넌트에서 svg 아이콘을 사용하려고 하니 컬러변경이 되지 않았다. 알고보니 컴포넌트는 svg 형식을 지원하지 않는다고 한다. 그래서 svgr 이라는 툴을 사용하여 리액트 컴포넌트를 svg 파일로 사용할 수 있도록 만드려고 한다. Next.js - SVG 사용해서 컬러, 사이즈 변경하기 (Feat.svrg) 1. svgr 설치하자 npm 명령어를 사용해 인스톨해주자 npm install @svgr/webpack 2. next.config.js 에 아래 설정을 심어주자 // next.config.js const nextConfig = { // 웹팩을 통해 svg 파일을 리액트 컴포넌트로 변환하는 설정이다 webpack : (config) => { config.modul.. 2023. 5. 14. 이전 1 2 다음 반응형
