[5주차] 4주차 과제 Next.js로 만들기

🧸 왜 Next.js를 사용할까?

Next.js는 React의 서버 사이드 렌더링(Server Side Rendering, SSR)을 쉽게 구현할 수 있게 도와주는 프레임워크이다.

SSR을 이용하면 초기 로딩 속도가 굉장히 빨라지고, 검색 엔진 최적화에 유리해진다.

하지만 리액트 라우터(Router)와 호환되지 않는다는 단점이 있다. 그렇기 때문에 이미 작성된 프로젝트에 적용하는 것이 매우 까다롭다.

🧸 과제 수행 중 발생한 문제

react로 만든 4주차 과제의 src 폴더를 가져올 때 발생한 문제

React의 components 폴더가 위치하고 있는 src 폴더를 5주차 과제 폴더 (my-app 폴더) 안에 복사하면 src 폴더에 접근할 수 있다.

기존의 파일에 src 또는 components 폴더에 대한 경로가 작성되어있다면, 바뀐 경로를 올바르게 수정해주어야 한다.

경로를 제대로 설정하지 않아 오류가 계속 발생했다.

• 기존 코드

import Header from ".components/Header";
import Todo from ".components/todo/Todo";

• 수정한 코드

import Header from "../src/components/Header";
import Todo from "../src/components/todo/Todo";

기존에 작성했던 index.js 코드를 Next.js로 작성해주기 위해, "pages" 폴더의 index.js로 옮긴다.

단, 맨 위에는 아래의 코드를 추가로 작성해주어야 한다.

import Head from "next/head";

또한 function 이름을 Home으로 바꿔주는 것이 좋다.

styled-components가 적용이 되지 않는 문제

styled-components 스타일이 적용 되기 전에 렌더링이 되기 때문에 발생하는 문제이다. css가 입혀지기 전에 html 파일이 그대로 노출되는 것이다.

아래의 과정을 따라하면 된다.
- 링크 클릭