Next
1.Next.js란?
Next.js는 React 앱을 쉽게 구축할 수 있게 하고 SSR을 쉽게 설정할 수 있게 하는 리액트 프레임워크다.공식문서 : https://nextjs.org/Next.js의 장점으로는 이렇게 적혀있다.직관적인 페이지 기반 라우팅 시스템(동적 경로 지원)가능
2.Next.js 라우팅
Next.js의 라우팅에 대해서 적어볼거에요. 요즘 팀프로젝트를 하면서 NEXT를 쓰게 됐거든요. 그래서 기록을 남길겸 혹시 도움 될까 싶어서 써봅니다ㅎㅎㅎ일단 NEXT 프로젝트를 셋팅해야겠죠?을 사용하여 초기세팅을 해줍니다!아니면 직접 세팅할 수도 있어요!!을 입력해
3.Next.js에서의 SSR이란
Client-Side-Rendering 과 Server-Side-Rendering은 다른 velog나 블로그에 너무나 많이 정리 되어있어서 그거를 참고하면 좋을 것 같다. 나도 그런 것을 보고 공부를 더 확실하게 해야겠다.Next.js에서는 next의 SSR을 이렇게
4.Next.js SSR 해보기
저번에 하던 폴더에서 Next.js 공식문서를 보고 ssr을 해보려고 한다.ssr(server-side-rendering)으로서 서버로부터 그려진 view를 받아오기 때문에 초기 구동 속도가 빠르고 seo 최적화 하기에 좋다.자세한 설명들은 다른 글에 잘 작성되어 있는
5.Next.js 동적 라우팅 SSR
이전에는 Next의 getInitialProps를 활용하여 기본적인 SSR을 해보았다. 이제는 동적라우팅으로 되어있는 페이지들을 SSR하게 만들어 볼 것이다. 그리고 styled-components가 처음에는 csr로 실행이 되어 css가 적용되지 않고 나타났다가 적용
6.styled-components 사용 및 Next.js 에서 SSR
styled-components란 ? react로 개발을 하면 SPA이기 때문에 class나 id를 제대로 구분하지 않으면 css가 겹쳐버리는 현상이 발생한다. 그래서 styled-components를 사용하면 알아서 임의의 id 또는 class로 구분시켜주기 때
7.Next.js에서 Redux 사용해보기
Redux란 ? Next.js에서 Redux 사용해보기
8.Next.js에 Redux-Saga 연결 해보기
Redux만으로는 비동기적인 작업을 처리하지 못 합니다. 그래서 미들웨어를 연결해서 비동기작업 처리를 하는 코드를 짜주어야 합니다. 대표적인 미들웨어로 thunk와 saga가 있는데 saga가 더 기능이 많고 많이 쓰이는 것 같아 saga로 해보도록 합니다.위 명령어를
9.Next.js ^9.3 Data fetching
9.2 버전까지는 getInitialProps로 퉁쳤던 ssr data fetching이 9.3버전부터 세분화 되었다. 오늘 Next에 TS를 써봐야지 하고 보다가 추가 된 것이 있어서 공부하며 적어본다.일단 getStaticProps : 빌드 타임 때 data fet
10.NextJS Babel 에서 SWC 전환 하는 과정에서 겪은 에러
NextJS 12 버전부터 SWC를 Next.js Compiler 로 소개한다.SWC는 Rust 기반의 컴파일러로 싱글 코어에서 babel 보다 20배, 4 코어에서 babel 보다 70배 빠르다고 소개하고 있다.회사에서 작업하는 프로젝트를 9버전에서 12버전으로 직접
11.NextJS 12 에서 14로 업데이트 하면서 간단한 꿀팁
버전업을 미루다 보면 부채가 된다. 나중에 되면 더 버전업을 하기 힘들어진다. 새로운 기술을 적용하기 어려워질 것이고, 문서도 나중에는 없어져서 찾아보기 힘들 가능성도 있다.우리는 서버에서 fetch 할 때 캐싱 기능이 매력적이라 생각했고, 필요해서 버전업을 하게 되었