개발소발닭발

다른 포스팅 찾아 볼 필요 없다. 공식 예제 보고, 설정하면 된다. Link와 같은 NextJS 자체 컴포넌트 랩핑 예시, SSR 환경에서 스타일이 잘 적용되어 내려오는지 모두 확인해 볼 수 있다. 물론 타입스크립트도 지원 ;) https://github.com/mui-org/material-ui/tree/master/examples/nextjs https://github.com/mui-org/material-ui/tree/master/examples/nextjs-with-typescript

public, assetprefix 경로 설정 설명 + 런타임 환경변수

Next.js에는 서버가 포함되어 있지만, 원한다면 커스텀 서버를 작성하고 거기에 Next.js를 연결해 사용할 수 있다. 이렇게 하면 몇가지 장점이 생긴다. - Next.js의 최상단 진입점을 제어할 수 있다. - Node레벨의 라이브러리를 사용할 수 있게 된다. - Koa, Express와 같은 서버를 구성할 수 있고, 서드파티 모듈을 이용할 수 있게 된다. - Node레벨(최상단)의 에러처리를 할 수 있다.

Next.js를 사용하면 CSR과 SSR을 자유롭게 넘나들 수 있다. Next.js에서는 데이터를 취급하는 방법이 몇 가지 있고, 이로 인해 렌더링 방식이 달라진다. 초기에 이 기능들을 정확하게 익히지 않으면, 계속 헷갈리게 된다. 차이점과 사용법을 분명하게 하고 시작하자. 웹 페이지는 크게 2가지로 나눌 수 있는데, 데이터가 필요 없는 페이지와 데이터가 필요한 페이지다. 1. 데이터가 필요 없는 정적 페이지를 Next.js가 취급하는 방법 위와 같이 파일 2개를 간단하게 작성하고 npm run build -> npm run start 스크립트를 통해 빌드하고 로컬 서버를 열어 localhost:3000에 접속해보자. 홈(/) 화면에서 프로필(/profile) 화면으로 이동해보자. 반대로 프로필 화면에서..

2년전 개인적인 프로젝트에 Next.js를 처음 써보고, 오랫동안 사용하지 않았었다. 근래 회사 프로젝트에 Next.js를 사용하게 되면서 그간 몰랐던 기능, 새로운 기능을 공부하기 위해 정리해보려 한다. Next.js는 공식문서가 잘 되어 있기 때문에, 공식문서를 통해 익혀보자! (Next.js의 장/단점에 대해서는 굳이 언급하지 않겠다.) 터미널을 열고, 아래의 명령어를 통해 아주 편리하게 설치가 가능하다. npx create-next-app --typescript npm run dev 순식간에 설치가 끝났다. 설치된 폴더에서 pages : 라우터와 맵핑된다. public : 정적 파일을 딜리버리 한다. 루트 경로에 맵핑되어 있다. localhost:3000/about 접속하면 해당 컴포넌트가 랜더링..