Next.js를 이용해 포트폴리오 사이트 만들기 - 기본 세팅하기(1)

❗ 주의 ❗

기본적으로 HTML, CSS, JavaScript, React에 관해서 알고 있어야 합니다.

 

오늘은 Next.js를 이용해서 자신만의 포트폴리오 사이트를 만들도록 하겠습니다.

만들었던 프로젝트들을 간단히 소개 및 사이트 이동이 되게 하고, 내가 어떤 기술을 가지고 있는지와 나에 대한 것들을 적는 사이트를 제작할 것입니다.

 

그럼 일단 프로젝트를 만들어봅시다.

명령 프롬프트로 가서 폴더 하나를 만드세요.

mkdir "폴더명"

그런 다음 그 폴더로 가줍시다.

cd "폴더명"

그리고 CNA를 이용해서 Next.js 앱을 설치하도록 하겠습니다.

npx create-next-app

그러면 What is your project named?라고 물어볼 텐데 이는 프로젝트명입니다.

저희는 프로젝트명을 nextjs-site라고 하도록 하겠습니다.

 

다운로드가 끝났으면 nextjs-site 폴더로 이동합니다.

그리고 code.이라고

 

여기까지 따라오셨다면 지금 이 화면이실 겁니다.

이제 여기서 쓸모없는 파일들을 지우거나 그 안의 내용들을 바꾸도록 하겠습니다.

 

styles 폴더 안에 Home.module.css라는 css파일이 있는데 이 안의 내용들을 다 지우도록 하겠습니다.

public 폴더 안에 있는 favicon.svg와 vercel.svg를 지우도록 하겠습니다.

pages 폴더 안에 있는 index.js 파일을 아래 사진과 같이 바꾸도록 하겠습니다.

 

그리고 이제 터미널에 가서 yarn dev 혹은 npm run dev라고 적어줍시다.

그러면 결과가 이렇게 나오고 localhost:3000이라는 사이트가 뜹니다.

그 localhost:3000이라는 사이트에는 우리가 index.js파일에서 적었던 Hello, Next.js!!라는 문구가 있는 걸 보실 수 있습니다.

 

이렇게 기본 세팅이 끝났습니다. 다음에는 Header를 작성하는 시간을 가져보도록 하겠습니다.