FE/Next.js

Next.js에서 mui 사용하기(TypeScript)

얼마 전에 진행했던 기업 사전 과제에서 Next.js에 css 프레임워크를 적용하라는 조건이 있어 mui를 적용하게 되었다. react에서 개발할 때는 패키지 설치만 하면 간단하게 사용할 수 있었는데 Next.js에서는 추가적인 설정이 필요했다. mui 설치 먼저 mui를 설치한다. npm install @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/styles // or yarn add @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/styles CssBaseline 설정 CssBaseline은 Next.js에서 mui를 쓰기 위해서 필수적인 것은 ..

Next.js 시작하기 - (3) Pre-rendering, Data Fetching

Series Next.js 시작하기 - (1) Project setting, Routing Next.js 시작하기 - (2) CSS-in-JS, Custom App Next.js 시작하기 - (3) Pre-rendering, Data Fetching Pre-rendering 기본적으로 next.js는 모든 페이지를 pre-render한다. 이는 각 페이지에 대해 html을 미리 만들어두는 것을 의미한다. Initial Load 과정에서는 자바스크립트 동작이 없는 html을 먼저 화면에 보여주는데, 아직 js 파일이 로드되기 전이므로 와 같은 컴포넌트는 동작하지 않는다. Initial Load에서 html을 로드한 뒤, js 파일을 서버로부터 받아 html을 연결시키는 과정이 일어나는데 이를 Hydrati..

Next.js 시작하기 - (2) CSS-in-JS, Custom App

Series Next.js 시작하기 - (1) Project setting, Routing Next.js 시작하기 - (2) CSS-in-JS, Custom App Next.js 시작하기 - (3) Pre-rendering, Data Fetching Next.js에서 css를 적용하는 법과 앱을 커스텀하는 방법에 대해 알아보자. 1. CSS-in-JS(Styled JSX) Next.js에서는 기본적으로 CSS-in-JS를 지원한다. 따로 설정을 할 필요없이 style 태그에 jsx 옵션을 주고, {``} 안에 스타일을 작성해주면 된다. 이 때 이 스타일들은 해당 컴포넌트 내부로 범위가 한정된다. 그렇기 때문에 global style을 적용하고 싶다면 ); }; export default GNB; GNB ..

Next.js 시작하기 - (1) Project setting, Routing

Series Next.js 시작하기 - (1) Project setting, Routing Next.js 시작하기 - (2) CSS-in-JS, Custom App Next.js 시작하기 - (3) Pre-rendering, Data Fetching React 공식 문서에서는 Next.js를 아래와 같이 소개하고 있다. Next.js는 인기 있는 경량의 프레임워크로 React로 만들어진 스태틱 서버 렌더링 애플리케이션입니다. 기본적으로 스타일링과 라우팅 해결책을 가지고 있으며, 사용자가 Node.js를 서버 환경으로 사용하고 있다고 생각합니다. 이게 무슨 말인지 바로 해보면서 알아보자. 1. Project setting 프로젝트를 만들 폴더에서 아래 커맨드를 입력한다. npx create-next-app..