# next
Next.js - styled-jsx로 스타일링 하기
next에서 지원하는 styled-jsx와 date 라이브러리인 date-fns를 활용하여 컴포넌트를 스타일링 합니다.
Nuxt, Next, Nest? 무엇이 다른가
출처 : https://tenmilesquare.com/resources/software-development/nuxt-next-nest-my-head-hurts/Nuxt, Next, Nest에 차이점을 알아보기 위해 찾다가 이 원글이 가장 설명을 잘해놓은 것
eslint-prettier-stylelint 세팅 총종리
react + next.js + typescript 조합에서 협업 시 사용하는 eslint + prettier + stylelint 세팅에 대해 총정리한 글입니다..eslintrc.jsoneslint에서 code convention은 plugins와, extends와
antd 사용해 SNS 화면 만들기 - 2
4. antd로 프론트 디자인하기 - 3 4-1. 크롬 확장 프로그램 4-2. 프로필 페이지 만들기 4-3. 회원가입 페이지 만들기(커스텀 훅)
antd 사용해 SNS 화면 만들기 - 1
1. antd와 styled-compoents 적용 2. antd로 프론트 디자인하기 - 1 2-1. antd 사용하기 2-2. 페이지 중복 처리하기 2-3. Next.js에서 HTML의 다른 구조를 수정하는 법 3. antd로 프론트 디자인하기 - 2 ..
Hello, Next.js
1. Next.js의 역할과 서버 동작원리 2. Next.js를 언제 사용해야할까? 3. Next.js 설치와 Eslint 적용 4. Next.js 활용한 페이지 제작 5. 컴포넌트 제작
[React] Next 환경에서 최근 검색어 저장 및 구현하기
localStorageJSON 정적 메서드 (JSON.stringify/ JSON.parse)Array.prototype.map()Array.prototype.filter()velog, 리액트로 최근 검색어 기능 구현해보기 🔥기존에 다른 벨로거 분이 공유해주신 코드를
[NEXT.js] : SSG와 SSR, pre-rendering방식
pre-rendering은 JavaScript가 없이도 화면을 작동(렌더링)시킬 수 있음을 이야기한다.페이지 접속 시점 부터 미리 만들어놓은 HTML을 보여 주기 때문에 성능과 SEO측면에서 유리하다.일반 react app은 JavaScript가 있어야 CSS가 작동하
[NEXT.js] : basic
webpack bundling & babel transfilingcode spliting : 현재 필요한 페이지 파일과 로직 파일만 로딩해온다. 로딩시간을 단축할 수 있고, 특정 파일에 에러가 있어도 그 외의 파일은 에러와 상관없이 사용 가능하게 된다.prefetchi
useRouter, 동적라우팅
그냥 리액트만 사용할 때 나는 ... 페이지 이동을 위해서 많은 명령어를 사용했어야 했다. 하지만 넥스트라이브러리를 사용하니, 이렇게 세상 편하게 이동을 할 수가 없어!라우터는 이름에서 알 수 있듯이 페이지 이동을 위해 사용한다.길을 만들어 주는 것 기존의 리액트 라우
[프로젝트]NEXT js에 Typescript 초기 세팅 해보기
NEXT js에는 친절하게 npx create-next-app --typescript의 명령어로 초기세팅이 가능하다, 그동안 기한이 있는 프로젝트를 맡아 하다보니 React나 React Native모두 CRA, EXPO CLI를 통해 빠르게 시작했지만 의도치 않은 Mo
[Next.js] typescript remark 에러
typescript로 remark 사용시 이 부분에 에러가 뜨는 것을 확인할 수 있었다. js로 할 때는 잘 되니 무엇이 문제인지 알 수 없었다...🥲 나의 경우, 버전을 14버전을 사용하고 있었는데 다음과 같이 13버전을 사용하니 문제가 해결되었다 타입스크립트
Next JS Pre-rendering : Hydration
서버로부터 HTML 파일을 넘겨받는 경우에서, 살짝 이상한 점이 있다. 브라우저의 콘솔을 확인해보면, 서버에서 HTML 파일 생성 과정에서 찍혔던 console.log 들이 여기서도 보인다. 분명 다 만들어서 그대로 HTML 넘기는 걸로 생각했는데 왜이런걸까?이유는 서
Next JS SSR - getServerSideProps
서버사이드 렌더링의 경우에는 Static Generation과는 다르게, 빌드 타임이 아닌 요청이 들어올때마다 HTML / JSON 파일을 만들어서 반환한다. 페이지 컴포넌트 파일에서 getServerSideProps async function을 export해주면 Ne