# nextjs
Next.js 를 Netlify 에 호스팅하기
Next.js 로 사이트를 만들었는데 호스팅을 해야겠다 마음 먹었다.gh-pages 로 하는데 자꾸 에러가 나서 포기하고 Netlify가 쉽다길래 이걸로 갈아탔다.Netlify가 좋은게 깃헙 레포에 연결해두면 내가 코드를 푸쉬만 하면 빌드를 해준다(잘 연결하면)저기 N
NextJS에 Recoil 적용하기
Recoil에 대해 자세히 알고싶다면 관련 포스트를 먼저 참고해주세요!Recoil은 페이스북에서 만든 새로운 React를 위한 상태 관리 라이브러리로,최대한 React의 시맨틱과 동작을 유지하면서 위의 문제점을 개선하기 위해 만들어졌습니다.Recoil을 사용하면 at
NextJS에 ESLint와 Prettier 적용하기
ESLint와 Prettier는 코드를 깔끔하게 유지하고 컨벤션을 통일하는데 좋은 툴입니다. 그래서 많은 프로젝트에서 많이 사용하고 있는데요, 오늘은 NextJS 프로젝트에 ESLint와 Prettier를 적용해보겠습니다!혹시 ESLint를 잘 모르시거나 자세한 설정에
NextJS에서 Link태그로 Routing하기
이전 글에서 레이아웃 컴포넌트를 만들고 헤더와 푸터를 추가했습니다. 헤더에는 로고도 있고 메뉴바도 있죠. 보통 로고를 누르면 메인페이지로, 메뉴를 누르면 해당 메뉴로 페이지가 이동(라우팅) 됩니다.원래 html에서는 a 태그로 사용하죠. 이와 달리 NextJS는 CSR
NextJS에서 React 컴포넌트 스타일링하기 (CSSModule)
이전 글에서 NextJS에서 React 컴포넌트를 추가하여 페이지로 확인하는 법을 살펴보았습니다. 이번 글에서는 React 컴포넌트 스타일링에 대해서 다룰 것인데요, 그저 css 스타일 속성 주는 것이 왜 주제가 될만한 내용인지 아마 이해하기 어려우실 수도 있습니다.사
NextJS에 React 컴포넌트 추가하기
이전 글에서, 설치된 NextJS 프로젝트에 Typescript를 추가했었습니다.그리고 이번에는 본격적으로 React 컴포넌트를 추가하여 페이지와 내부 컴포넌트를 만들어서 index 홈페이지를 구성하려고 합니다.우선 컴포넌트 디렉토리 구조는 사람마다, 프로젝트마다, 회
NextJS에 typescript 설치하기
이전 글에서 NextJS 프로젝트를 생성하고 구조를 간단히 살펴보았습니다.이번에는 생성한 NextJS에 typescript를 설치하려고 하는데요, 바로 패키지를 다운로드해도 되지만 NextJS 공식 문서에서는 조금 다른 방식을 소개합니다.바로 프로젝트 루트에 tscon
NextJS로 React 프로젝트 시작하기
React는 Vue와 Angular와 많이 비교되지만, 그래도 프레임워크가 아닌 라이브러리입니다.그러다보니 React만으로는 아쉬운 점이 많기도 하는데요,그래서 적지 않은 분들이 프레임워크를 함께 사용합니다.React 프레임워크 중에서는 GatsbyJS와 NextJS
React로 SNS 만들기 (10) - 배포
AWS 아마존웹서비스 배포를 해보자. ec2 인스턴스에 프론트, 백엔드 서버를 만들어보자 현재 선택한 우분투 서버는 메모리가 1gb여서 웹을 빌드시킬 때 용량이 크다면 메모리를 늘려야 될 것이다. 프로젝트에 SSH 연결을 통해 프론트를 우분투 서버에서 프로젝트를
Getting start with Nextjs
https://nextjs.org/docs/api-reference/create-next-app
React로 SNS 만들기 (9) - 빌드하기
빌드하기 전 백엔드 서버를 켜놓는다.그 후 npm run build로 빌드.js,ts,css,html 등 파일의 용량을 줄이기 위해서 gzip으로 압축을 해줘야한다.파일의 용량이 1mb가 넘으면 렉이 걸리기 시작한다고한다.커스텀웹팩을 통해서 한다. 이때 compress
[Next]Next.js에서 이미지 사용하기
Next에서 이미지를 사용하는건 여간 쉽지가 않다.공식문서에는 다음과 같은 레퍼런스를 제공하고 있다.이미지 컴포넌트 자체를 Next에서 제공해주고 있다.뭔가 고마운거 같지만 써보면 참 그렇다.일단은 Image 컴포넌트를 사용 시, src, width, height 속성
nextjs reverse proxy로 cors에러 해결하기
react와 nextjs로 개발하는 서버(http://localhost:3060)가 실서버(https://backserver.example.co.kr, 백엔드)와 api통신을 하자 cors에러가 발생했다. Access to XMLHttpRequest
nextJS-reduxSaga-Typescript boilerplate(storybook 포함)
https://github.com/wmc15156/nextjs_storybook_skeleton_typescript
운영배포설정
production환경시 설정설정logger middleware for node.js 다른 logger 모듈을 사용해도 무방하다.confined : production환경에 적합한 formatdev : development환경에 적합한 formatexpress-sess
Next js 환경파일 설정하기
보통 프로젝트를 진행할때, 사용되는 api key나 path들을 환경파일에 따로 뽑아서 관리를 하는데개발용과 실서버용의 .env파일을 따로 두고 개발 환경에 따라 env 값을 다르게 받아올 수 있다.이를 위해 env-cmd 패키지를 이용해서 스크립트에 따라 따로 환경파
Next JS 프로젝트 개발 일지
2020년 12월 NEXTJS가 뭔지도 제대로 파악하지 못하고 얼레벌레 프로젝트를 실행했다.원래 내 성향 자체가 부딪히면서 배우는 스탈이긴 하지만, 나중에 또 까먹을수도 있으니까 넥스트를 사용하면서 겪었던 시행착오들을 그냥 하나하나 생각나는대로 써보려한다.프로젝트에 리