#0. Next 시작하기

Requirements

NextJS 시작 전 요구사항

React의 jsx, state, props, data fetch, routing 의 기본 개념을 숙지해야 함.

NextJS는 프레임워크다.

공식문서 : https://nextjs.org/docs

Project Setup

1. npm init
2. JSON script license → MIT
3. npm install react@latest next@latest react-dom@latest
4. app 폴더에 page.tsx OR page.jsx 만들고
5. npm run dev (package.json 에서 scripts “dev” : “next dev” 로 수정 후) 실행

 

노마드 코더에서 강의를 보고 Next 웹을 만들고 배포까지 해보려고 한다.

사실 이미 다했는데 정리할겸 써보는 블로그글.. 다른 분들의 완성본을 보고 생각이 많아졌다.

프론트엔드 업무 뿐만 아니라 퍼블리싱까지 잘하시는 분들이 참 많은 것 같다. 사실 요즘은 경계가 많이 사라진것 같다.

잘 기억을 못하기때문에 까먹기전에 지식 저장소에 적어야겠다.

 

Next + Nomad Mpvie API로 만든 웹페이지 (deploy: vercel)

https://next-js-movie-theta.vercel.app/

홈 | Next Movies

 

github : https://github.com/yasisicoco/NextJS

GitHub - yasisicoco/NextJS

 

추가로 GPT가 추천하는 Next를 시작하면서 알면좋은 개념들

1. JavaScript/TypeScript 기초

• ES6+ 문법에 익숙해야 합니다 (arrow functions, destructuring, async/await 등)
• TypeScript를 사용할 경우 기본적인 타입 시스템을 이해해야 합니다

2. Node.js와 npm

• Node.js 환경에 대한 기본적인 이해가 필요합니다
• npm(Node Package Manager)을 사용한 패키지 관리에 익숙해야 합니다

3. 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)

• SSR과 SSG의 개념 차이를 이해해야 합니다
• NextJS에서 제공하는 getServerSideProps와 getStaticProps 함수의 용도를 알아야 합니다

4. 파일 기반 라우팅

• NextJS의 파일 시스템 기반 라우팅 방식을 이해해야 합니다
• 동적 라우팅에 대한 개념을 알아야 합니다

5. API 라우트

• NextJS에서 제공하는 API 라우트 기능을 이해해야 합니다
• 서버리스 함수 개념에 대해 알면 도움이 됩니다

6. 성능 최적화

• 이미지 최적화, 코드 스플리팅, 레이지 로딩 등의 개념을 이해해야 합니다
• NextJS의 Image 컴포넌트 사용법을 알아야 합니다

7. 환경 변수 관리

• .env 파일을 사용한 환경 변수 관리 방법을 알아야 합니다

8. 배포 개념

• Vercel 등의 플랫폼을 통한 배포 프로세스를 이해해야 합니다

9. SEO 기초

• next/head 컴포넌트를 사용한 메타 태그 관리 방법을 알아야 합니다

10. 상태 관리

• React의 Context API나 Redux 같은 상태 관리 도구에 대한 기본적인 이해가 필요합니다