[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (1)

알다시피 근본은 공식문서.

 

https://nextjs.org/docs

Docs | Next.js

 

node.js 18.17 버전 이상으로 지원한다.

 

npx create-next-app@latest

 

따끈따끈한 신상으로 시작해보자.

 

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 to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

 

1. 프로젝트 이름

2. 타입스크립트 사용 유무

3. ESlint 사용 유무

4. Tailwind CSS 사용 유무

5. src 디렉토리 사용 유무

6. 앱 라우터 사용 유무 (권장)

7. import alias 를 커스터마이즈 유무

8. alias @/* 둘 중 어떤 것을 사용할 것인가

 

나는 Tailwind 쓰기 복잡해서 안쓰려 했으나 추후 NextUI 반영하면서 설치하게 됐다.

순정파이므로 alias는 기본값으로 쓴다.

 

그럼 짜라란 하고 알아서 설치가 된다. 

페이지 구조를 app 내부에서 layout과 page로 구분하여 사용하는데 index.ts와 app.js 느낌이다. next는 폴더구조가 페이지 구조가 되니 url 고려하면서 폴더 나눠서 page.tsx 생성하면 페이지가 뚝딱뚝딱 완성이 된다.

 

npm run dev 로 실행해서 localhost를 띄워보면 처음 준비는 끝이다.