본문 바로가기
IT/javascript

[Next.js]공식사이트 튜토리얼 따라하기

by 가능성1g 2024. 5. 31.
반응형

Learn Next.js | Next.js (nextjs.org)

 

Learn Next.js | Next.js

Learn how to build a full-stack web application with the free, Next.js App Router Course.

nextjs.org

 

** Next.js 는 이런거군 **

1. 폴더로 라우팅 설정이 가능하다. 하이레키하게 설정이 된다. 주소와 폴더의 트리구조가 매핑! ( 직관적임)

2. 폴더별로 page.tsx layout.tsx 파일을 생성해서 기본 값을 설정할 수 있다. 

3. 루트(app/)의 layout.tsx 은 전체에 영향을 끼친다.

4. php 를 대체? 하는게 목적이어서, 단순 SSR 뿐만아니라 서버리스 연동으로 마치 서버페이지역할도 한다. ( 예제에서 postgresql 과 연동함 )

5. tailwind 쓰고 있다 ( 예제 한정 )

6. 별도의 Image 컴포넌트를 쓰고 Inter 를 이용해서 폰트와 이미지 최적화 가능

7. clsx 를 이용해 조건부 css 사용 가능 (예제 한정)

8. 17챕터 메타는 패스

9. 로그인 부분은 베타? 인듯. 쉬운듯어려움

10. 아직은 mongodb 하고 만 함께쓰는 느낌. 서버는 역시 express.js 를 써야 하겠다. 일부기능만 채용 필요

 

주의할점 1.

Chapter 6 에서, postgreSQL 더미데이터 생성시, dotenv 가 설치가 안되어 있으므로 설치 후 실행한다.

 

샘플 내가만든거!

https://nextjs-dashboard-nine-pink-10.vercel.app/

 

https://nextjs-dashboard-nine-pink-10.vercel.app/

 

nextjs-dashboard-nine-pink-10.vercel.app

 

github 소스

HanTJ/nextjs-dashboard (github.com)

 

GitHub - HanTJ/nextjs-dashboard

Contribute to HanTJ/nextjs-dashboard development by creating an account on GitHub.

github.com

 

 

반응형