리액트만 써서 만들다가 호기심+사람들이 SEO통해 검색해서 들어와야하니 넥스트 써봄
node version 18.17 or later 여서 확인 결과 v20.1.0 임
https://nextjs.org/docs/getting-started/installation
Getting Started: Installation | Next.js
Create a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file.
nextjs.org
공식문서 기반해서 이 글을 작성한다
최신 버전 CNA 하니깐 넥스트 14.0.3 버전이라고 함 (지난달 업데이트네.. 실전에는 안써야징)
쓰기 싫은건 안썼다 (아래 이미지)
package.json 을 한번보고, yarn run dev 실행 후 localhost:3000 접속하니깐 화면이 보임
폴더구조를 보자
대충 읽어보니깐 Routing, Rendering, Data Fetching and Styleing 정도만 보고 작업하면 될 것 같으
Rounting
13 version 에서 App Router 등장함.
supports shared layouts, nested routing, loading states, error handling, and more.
쫌 좋아진것 같음 그전에는 Page Router 를 사용했던 것 같음
https://nextjs.org/docs/app/building-your-application/routing
와 여기서 쫌 보고 있는데 걍 라우팅 코드가 필요없이 폴더구조를 알아서 인식해서 작동한다. 참놔
Data Fetching
Data 어떻게 가져오는지 보려는데 .. 서버쪽 ? 클라이언트 쪽이 있다.
넥스트를 쓰는 이유는 서버측에서도 렌더링 할 필요가 있어서 등장한걸로 알고있는데
모르겠고, 걍 1번만 봐야겠다.
걍 쏘는거고 확장 기능들 몇개 있어서 패스
Data Fetching Patterns
There are a few recommended patterns and best practices for fetching data in React and Next.js. This page will go over some of the most common patterns and how to use them.
라니깐 한번을 볼까? 나중에 진짜 데이터 요청할일 있으면 봐야겠다.
Rendering
Server Components
React Server Components allow you to write UI that can be rendered and optionally cached on the server. In Next.js, the rendering work is further split by route segments to enable streaming and partial rendering, and there are three different server rendering strategies:
아까도 Fetching strategy 할때 이 나왔었는데 뭐 중요한 개념인가보다..
일단 넥스트는 렌더링이 3가지 있다.
1. Static Rendering (Default)
2. Dynamic Rendering
3. Streaming
3개다 서버 렌더링임. 클라이언트 컴포넌트( 클라이언트 렌더링이라고는 안하네?) 를 보려면 옵션이 있긴함
정적 렌더링이 디폴트라고 함.
Static rendering is useful when a route has data that is not personalized to the user and can be known at build time, such as a static blog post or a product page.
응 나는 정적렌더링 써야지~ 다 패스
Styles
어쩌구 저쩌구 스타일
- Global CSS: Simple to use and familiar for those experienced with traditional CSS, but can lead to larger CSS bundles and difficulty managing styles as the application grows.
- CSS Modules: Create locally scoped CSS classes to avoid naming conflicts and improve maintainability.
- Tailwind CSS: A utility-first CSS framework that allows for rapid custom designs by composing utility classes.
- Sass: A popular CSS preprocessor that extends CSS with features like variables, nested rules, and mixins.
- CSS-in-JS: Embed CSS directly in your JavaScript components, enabling dynamic and scoped styling.
아이고 뭔 .. 걍 심플하게 locally scoped 가진 CSS인 CSS Modules 를 사용해야겠다 . (https://nextjs.org/docs/app/building-your-application/styling/css-modules#example)
끝. 넥스트 끝~!
이제 프로덕트 만들면서 찾아봐야겠다
