🎀 [튜토리얼] Next.js 시작하기 🎀

"Next.js 써볼까?"

처음 Next.js를 시작할때, "역시 요즘 트렌드는 React, Next.js지!"라고 생각하면서 그냥 무작정 시작했던것 같아.

근데 Next.js 공식 홈페이지에 들어가봤는데 뭔가 복잡한거야!
그래서 정리해봤다. Next.js 시작하기!

Next.js를 이미 알고 있거나 나중에 알고싶으면 "Next.js 시작하기"로 바로 넘어가자!

💎Next.js란?

Next.js 프로젝트를 시작하기 전에 이 Next.js가 뭐하는 놈인지 알아야하겠지?
Next.js는 React 기반의 Framework야.
Next.js를 사용하는 가장 큰 이유는 ✨Sever Side Rendering(SSR)✨때문이지.

🎯그래서 Framewokr가 뭔데?

Framework란 단어 많이 들어봤을꺼야.
그래서 Framework가 무었이고 Library하고 어떻게 다른걸까?

간단하게 설명하면 Library는 이미 만들어져 있는 코드를 유저(개발자)가 불러와서 사용하는거야.

반면에 Framework는 Framework가 유저(개발자)가 쓴 코드를 불러가서 사용해.
그래서 Framework가 정해준 방식으로 코드를 작성해야해. 그래야 Framework가 내 코드를 제대로 인지하고 가져가서 적절하게 써줄 수 있거든.

🎯그래서 SSR이 뭔데?

Server Side Render(SSR)은 말 그대로 렌더링을 서버에서 해주는거야.
SSR은 다음 글에서 더 자세히 다룰께. 아래에 글을 참고해줘.

🎯그래서 Next.js 장점이 뭐야?

🎯그래서 Next.js 단점은 뭐야?

🎯그래서 Next.js는 어떤 프로젝트에 쓰면 좋은데?

💎Next.js 시작하기

Next.js를 설치해보자!

1. Node.js 다운로드

🛸[Node.js 다운로드하러 가기]🛸
Node.js를 설치해준다. 16.16.0 LTS 추천!

2. Next.js 다운로드

🛸[Next.js 공식 홈페이지 가기]🛸

• Terminal을 실행시켜줘! Powershell, Node.js command prompt 등등 아무거나 열어주면 돼!
• 이제 너의 새로운 프로젝트를 깔아줄 디렉토리(폴더)로 가보자.
  cd [directoryName]
• 이제 이 프로젝트에 어떤 언어를 사용할지 정할 시간이야. 우리에겐 Javascript와 Typescript, 두개의 옵션이 있지.
• 만약 Javascript를 사용할 예정이라면 아래 코드 중 하나를 터미널에 입력해줘
  npx create-next-app@latest
  또는
  yarn create next-app
  또는
  pnpm create next-app
• 만약 Typescript를 사용할 예정이라면 아래 코드 중 하나를 터미널에 입력해줘
  npx create-next-app@latest --typescript
  또는
  yarn create next-app --typescript
  또는
  pnpm create next-app --typescript
• 위 코드 중 하나를 실행시키면 프로젝트 이름을 알려달라고 할꺼야. 원하는 프로젝트 이름을 적어주자

이제 모든 준비는 끝났어! Next.js를 사용해보자!