feat(fe): 13주 차 Next.js

content/docs/frontend/7. Next.js.md

@@ -6,3 +6,35 @@ date = "2023-09-11"
 lastmod = "2023-10-05"
 weight = 280
 +++
+
+지금까지 배운 React는 CSR(Client Side Rendering) 방식으로 동작해요! 즉 서버에서 브라우저로 전달되는 HTML 파일에는 일부 정보만 담겨있고, 나머지 정보는 브라우저에서 JavaScript를 통해 가져오는 방식이예요! 이러한 이유로 초기 로딩 속도가 느리고, 검색 엔진 최적화(SEO)가 어렵다는 단점이 있어요. 이번 시간에는 이러한 단점을 보완하기 위해 React에 SSR(Server Side Rendering)을 적용한 Next.js를 알아봅시다!
+
+## 📚 공부할 내용
+
+- [[손에 익는 Next.js] 공식 문서 훑어보기](https://www.inflearn.com/course/%EC%86%90%EC%97%90-%EC%9D%B5%EB%8A%94-nextjs-part1/dashboard)
+  - 인프런 아이디는 `[email protected]`이고 비밀번호는 노션 신규 팀원 스터디 페이지에 있어요!
+- [어서 와, SSR은 처음이지? - 도입편](https://d2.naver.com/helloworld/7804182)
+  - 네이버 블로그에 SSR을 도입하게 된 이유를 주제로 SSR을 설명하고 있어요!
+  - SSR을 이해하는데 도움이 될 거예요!
+
+## 🎯 프로젝트 실습
+
+지금까지 만들었던 프로젝트를 Next.js로 전환해요!
+
+### 1. Next.JS 프로젝트 생성
+
+1. `npx create-next-app` 또는 `pnpx create-next-app` 명령어를 통해 Next.js 프로젝트를 생성해요.
+   1. App router, typescript, tailwindcss는 선택해주세요!
+   2. src 옵션은 선택하지 않아요!
+2. `npm run dev` 또는 `pnpm run dev` 명령어를 통해 프로젝트를 실행해요.
+
+### 2. Next.JS 프로젝트에 React 프로젝트 이식
+
+1. 저희는 메인 페이지와 디테일 페이지가 있으니 디테일 페이지를 위한 route를 추가해요.
+2. app 폴더 안에 폴더를 만들면 자동으로 route를 생성하기 때문에 components 폴더는 app 폴더 밖에 만들거나 `.components`로 이름을 지어야 해요.
+   1. `.`으로 시작하는 폴더는 자동으로 route를 생성하지 않아요.
+3. 디테일 페이지에 쓰던 GraphQL은 이번 프로젝트에서 사용하지 않고 더미 데이터를 사용해주세요!
+   1. 이번 실습에서는 GraphQL을 사용하지 않아요!
+4. 메인 페이지에 쓰던 axios는 fetch로 대체해주세요!
+   1. 이번 실습에서는 axios를 사용하지 않아요!
+   2. Next.JS에서는 캐싱과 같은 기능을 추가한 fetch를 사용해요!