Next.js 정적페이지 웹사이트 만들기 > 자유게시판

자유게시판

Next.js 정적페이지 웹사이트 만들기 정보

Next.js 정적페이지 웹사이트 만들기

본문

넷플릭스, 트위치, 텐센트, 훌루, 나이키, 틱톡, AT&T에서 쓰고 있는 Next.js를 소개해드립니다.

 

https://nextjs.org/showcase

 

위 링크에 보면 현재 사용 중인 회사들이 많이 나옵니다.

 

 

 

https://www.staticgen.com/

 

위 사이트는 정적사이트 모음인데, 현재 기준 Next.js가 가장 활발하게 개발되고 있습니다.

 

 

 

정적페이지로 돌아가는 Next.js

 

소개

DB 없이 단순한 HTML을 만들어서 페이지로 엮은 후 홈페이지를 완성

 

장점

물리적인 서버 없이 CDN에 올려서 쓰기 때문에 비용 부담이 없음 (https://vercel.com/)
(무료로 전세계 CDN에 올라가므로, 외국 상대로 홈페이지를 만들어도 부담없음)
HTTPS 기본 무료 제공

 

단점

기본적인 이해가 힘듬
이해해도 글을 생성하기 힘듬 (정적 페이지를 만들기 위한 여러가지 방법들이 존재)
기본적인 github 사용법을 미리 알고 있어야 됨 (모르면 낭패)

 

 

 

우선 놀란 것은 전세계 CDN을 무료로 제공한다는 것이고

무려 ICN 인천에도 서버가 있어서 국내 접속 속도가 빛과 같습니다.

 

https://www.fastorslow.com/app/profile/fb0ec909-96cf-54d5-ba07-0ac42ff785b8

 

위 링크를 클릭하시면 남아공을 제외하곤 전부 광속급인 것을 알 수 있습니다.

 

 

그래서 이것저것 공부하다보니 깃허브도 처음 사용하게 되었는데요.

 

이게 쓰다보니 진짜 좋은데, 처음 쓰는 사람이 느끼기엔 너무 어렵다는 것이었습니다.

 

 

아무튼 크게 요약을 해보면

 

1. 집 컴퓨터에서 로컬로 Next.js를 구동 후 글 작성(이게 제일 어렵습니다)

2. 깃허브와 연동

3. 깃허브와 vercel.com과 연동

4. vercel.com은 무료로 전세계 CDN에 변동사항을 즉시 전파

5. 사용자는 서버없이 파일 관리만으로 무료로 정적홈페이지 완성 가능

 

 

일단 워드프레스 테마 같은 것이 무궁무진한데요.

 

어떤 것을 선택하고, 어떻게 꾸며갈 것인가가 제일 중요하다고 생각합니다.

 

그런 구조가 나온다면, 정적페이지 생성기를 통해 생성 후 순서대로 하면 됩니다.

 

 

https://woosung.vercel.app/

 

 

위 사이트를 이제 만들었는데, 템플릿을 올려서 꾸며보고 싶네요. ㅎㅎ

 

아무튼 요새 대세인 정적 홈페이지 만들기 후기였습니다.

추천
2

댓글 6개

컨텐트를 github에 저장된 마크다운 텍스트로 관리가 되는 것 같습니다.
사용되는 마크다운 프로세서는 https://remark.js.org/  이것이고..

해외에서는 마크다운이 대세인 것 같습니다.
마크다운도 있지만 이미지와 관리의 편의성을 위해 여러가지 툴을 제공해주고 있습니다.

https://nextjs.org/docs/advanced-features/preview-mode
전체 196 |RSS
자유게시판 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT