Next.js 프로젝트 빌딩하는 법

NEXT.JS

Next.js는 리액트의 풀스택 프레임워크이다.

리액트의 단점을 보안하고 서버 사이드 렌더링으로 돌아간다. (클라이언트 사이드 렌더링도 가능함)

SEO에 불리한 리액트랑 다르게 Next.js는 SEO가 잘 적용이 된다. 또한 현재 프론트엔드에서 가장 트렌디하다. 

(관련 영상 및 글)

https://toss.tech/article/firesidechat_frontend_6

프론트엔드 개발에서 Next.js, 꼭 써야 할까? | EP.6 모닥불

---

https://www.youtube.com/watch?v=1w70c7x62BI

---

실제로 프로덕트의 규모 및 수준이 높아지면 리액트의 한계가 생기게 되는데, 이 부분을 더 보완할 수 있는 Next.js가 더 강력하다. (풀스택이라 이 프레임워크 하나로 백엔드까지 다 가능)

이제 기본적인 프로젝트 빌딩 방법을 알아보자.

설치

npx create-next-app@latest

---

vs code를 열고 터미널을 열어서 위 명령어를 작성하면 밑의 질문이 나오게 된다.

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

순차적으로 방향키 및 엔터로 설정해주면 된다. 처음엔 본인 프로젝트 이름을 정하게 된다. (대문자 금지, 띄어쓰기 금지)

이후 TS의 질문, ESLint의 유무 등등 여러 질문을 하게 되는데, 본인에 맞게 설정해주면 된다. (다만 ts랑 Tailwind 부분은 마음대로 하고 나머지는 Yes를 선택하는 것을 추천한다.)

실행

이후 실행하고 싶다면..

cd my-app
npm run dev

본인 프로젝트로 디렉토리를 변경하고 npm run dev를 작성해 주면 실행이 된다.

실행하고 다음 url로 접속한다. (브라우저에 url를 입력하거나, 에디터에 있는 링크를 열면 된다.)

> http://localhost:3000 

이러면 다음 화면이 뜨게 된다.

 

 

이렇게 뜨면 성공한 것이다. 이후 Ctrl + c를 눌러 프로젝트를 종료하면 끝이다.

이로써 프로젝트의 기본적인 빌딩은 끝났다. 이후 문법이나 기능같은 부분 등등 여러 요소들을 이야기하겠다.

공식 문서

https://nextjs.org/

Next.js by Vercel - The React Framework

(공식 문서는 여기를 참고하면 됩니다.)