tm nextjs starter 다운로드 - tm nextjs starter 소스 코드 다운로드

tm nextjs starter

기타 카테고리

1.0.0

다운로드

이것은 2018년 8월 현재의 최소한이지만 기능적인 React 스타터 키트 및 데모 앱입니다.

자바스크립트 피로에 지쳐 빠르고 쉽게 시작하고 싶다면 이 글을 살펴보세요. 최신 SPA React 앱을 개발하는 것은 이보다 훨씬 간단하지 않습니다.

라이브 데모 nextjs.tomicloud.com

스크린샷

데모 앱은 요청 시 지연 로드되는 몇 개의 주소 지정 가능 페이지가 있는 기본 단일 페이지 앱인 정적 사이트입니다. 1) 영화 나열, 2) 영화 세부 정보 보기, 3) 생성/편집, 4) 영화 삭제 등 기본적인 CRUD 작업을 보여줍니다.

데모에서는 데이터 저장을 위해 브라우저 localStorage를 사용합니다. 즉, 백엔드 없이 실행됩니다. 소스에는 REST 백엔드에 대한 실제 AJAX 호출을 수행하는 모듈이 포함되어 있습니다. 모듈을 활성화하고 서버를 작성하기만 하면 실제 웹 앱을 쉽게 만들 수 있습니다. 저는 이 간단한 영화 API를 예로 구현하는 RESTPie3 Python REST API 서버를 개발했습니다.

빌딩 블록

데모 앱은 최신 웹 앱을 만드는 데 필수적인 기능을 제공하는 간단하지만 강력한 기술 스택으로 구성됩니다. 이는 몇몇 훌륭한 도서관의 어깨 위에 서 있습니다.

React는 전 세계가 극찬하는 기초 Javascript 라이브러리입니다.
Nextjs는 React 앱을 빠르게 구축하기 위한 경량 Javascript 프레임워크입니다.
MobX는 빠르고 쉬운 상태 관리 라이브러리입니다
SASS는 여전히 작업을 잘 수행하는 좋은 오래된 CSS 확장 언어입니다.
Axios는 Promise를 기반으로 하는 인기 있는 AJAX 라이브러리입니다.

소스 트리

 ├── /components/                # React components used by pages
│   └── /MyHeader.js            # Site header component, just as an example
├── /pages/                     # pages
│   ├── /_app.jsx               # top level layout of the app, loaded once
│   ├── /about.jsx              # about page
│   ├── /index.jsx              # home page, lists movies
│   ├── /moviedetails.jsx       # details page, views a movie
│   └── /movieedit.jsx          # edit page, edits a movie
├── /static/                    # static assets, accessed/exported as is
│   ├── /favicon.ico            # favicon
│   └── /exampledata/
│       └── /movies.json        # sample list of 4 movies - loaded initially
├── /styles/                    # global SASS files
│   └── /layout.sass            # main layout
├── config.js                   # app config, select ajax or localstorage
├── next.config.js              # nextjs configuration, almost empty
├── package-lock.json           # npm something
├── package.json                # list of npm packages required
├── README.md                   # this doc
├── serverapi_ajax.js           # API, talks AJAX to a real backend
├── serverapi_localstorage.js   # API, talks to localStorage
└── store.js                    # data store, managed by MobX

지역 발전

로컬 머신에서 스타터를 실행하는 방법은 다음과 같습니다.

$ git clone https://github.com/tomimick/tm-nextjs-starter
$ cd tm-nextjs-starter
$ npm install
$ npm run dev

그런 다음 브라우저에서 http://localhost:3000을 지정하십시오.

종속 파일이 수정되면 변경 사항이 핫 로드되어 즉시 표시됩니다. 개발을 즐겨보세요!

Next.js

Nextjs는 Javascript 개발의 혼란스러운 영역에 적절한 수준의 질서를 부여하는 훌륭한 프레임워크입니다. 구성과 도구를 관리하여 React 개발을 쉽게 시작할 수 있으므로 처음부터 핵심 앱에 집중할 수 있습니다. 모든 웹 앱에 실질적으로 필요한 잘 설계된 최소한의 핵심 기능을 제공합니다.

Next.js의 이점은 간단히 말해서 다음과 같습니다.

최소 구성 - 원하지 않는 한 웹팩이나 바벨 구성을 수정할 필요가 없습니다.
소스 파일에 구조를 적용합니다. 파일 시스템이 API입니다.
개발 작업 속도를 높이기 위한 페이지 핫 리로드
SPA 라우팅 로직 내장
페이지 자동 코드 분할(Webpack에서 제공)
배포 옵션: 정적 서버리스 사이트 내보내기 또는 백엔드에서 Node.js 실행

Nextjs는 충분히 성숙했고 약 2년 전에 출시되었으며 건강한 플러그인 생태계를 갖추고 있습니다. Webpack은 기초 작업에 사용됩니다.

Nextjs가 미래에 훨씬 더 나은 것으로 대체되거나 병합되는 것은 완벽하게 가능하며 가능성이 높지만 시도해 볼 가치가 있는 몇 가지 모범 사례가 요약되어 있습니다.

MobX 상태 관리

Redux는 일반적으로 React 앱의 상태 관리 솔루션으로서 첫 번째 단계입니다. 이는 사용 가능한 초기 라이브러리 중 하나였으며 많은 블로그에서 이야기되어 거의 표준 상태를 얻었습니다.

저는 Redux에 대해 첫 만남부터 엇갈린 감정을 느꼈습니다. 나는 항상 스스로 생각하고 연구하는 것을 좋아하며 많은 React+Redux 코드 기반을 읽고 다른 옵션을 평가한 후에는 기능적이고 순수한 패러다임을 갖춘 Redux가 나에게 약간 추상적이고 과도하게 엔지니어링된 것처럼 느껴진다고 생각합니다. (Plus Redux는 단순히 필요하지 않은 곳에서도 사용됩니다. 너무 쉽게 넘어갈 수 있습니다.)

제 생각에는 MobX가 Redux보다 상태 관리에 더 간단하고 실용적인 솔루션을 제공합니다. 픽업하고 이해하는 것이 더 쉽습니다. 상용구 코드가 덜 필요합니다. 관찰 가능하다고 선언한 상태가 있고 상태를 변경하기만 하면 모든 관찰자가 자동으로 업데이트됩니다. MobX는 작동하며 방해가 되지 않습니다.

엔지니어들은 Redux가 더 큰 앱에 더 나은지 "실제" 앱에 더 나은지에 대해 논쟁을 벌이지만 이는 끝없는 싸움입니다. 내 전략은 일반적으로 처음부터 "큰" 앱을 성장시키려는 시도조차 하지 않고 코드를 간결하고 의미 있게 유지하는 것입니다.

CSS

Nextjs는 사이트 전역 및 페이지 로컬 CSS 스타일 시트를 모두 지원합니다.

단일 전역 CSS 파일이 소스 SASS 파일에서 처리 및 빌드된 다음 일반 링크 태그를 사용하여 HTML의 앱에 연결되고 앱 시작 시 한 번 로드됩니다. 입증되고 견고하며 최고의 성능을 제공합니다. 모든 CSS를 JS에 넣을 필요는 없습니다!
페이지 로컬 스타일은 페이지와 함께 요청 시 로드되며 style jsx -tags 내부의 페이지 구성 요소에 작성됩니다(예: about.jsx 참조).

이 데모에서는 최근 웹 레이아웃 표준인 CSS 그리드 기능도 실험합니다. CSS 그리드는 2차원 그리드를 정의하는 강력한 방법을 제공하는 강력한 레이아웃 도구입니다. 레이아웃을 구축하는 방식이 바뀔 것입니다. 아직 CSS 그리드에 대해 배우거나 읽지 않았다면 2018년이 이를 하기에 좋은 시기입니다. 브라우저 지원은 이미 매우 좋습니다. 곧 주류가 될 것입니다.

정적 사이트 생성

Nextjs로 정적 사이트를 생성하는 기능은 백엔드 서버 없이 앱을 실행할 수 있게 해주는 중요한 도구입니다. 사이트를 GitHub 페이지, Netlify 또는 Amazon S3로 내보낼 수 있습니다. (그러나 Github 페이지의 사이트+링크 접두어가 있는 몇 가지 문제를 확인하세요.)

정적 생성의 또 다른 이점은 백엔드의 언어에 관계없이 모든 REST 백엔드와 앱을 연결할 수 있다는 것입니다. 프런트엔드와 백엔드를 깔끔하게 분리하면 기술 수준은 물론 팀 수준에서도 모듈화가 가능합니다.

SEO에 대한 참고 사항: 동적 데이터가 포함된 페이지의 정적 버전을 내보내려면 next.config.js 구성의 모든 페이지를 스크립팅해야 합니다. 이 예를 참조하세요.

정적 사이트를 생성하려면 다음을 실행하세요.

$ npm run export

그리고 정적 파일은 out 폴더에 생성됩니다.

로컬 www-server를 통해 로컬로 정적 사이트를 테스트하기 위해 Python 스크립트(python3 -m http.server)를 빠르게 실행합니다.

$ npm run pyserve

그런 다음 http://localhost:8000에서 사이트를 테스트합니다.

자바스크립트의 크기

홈 페이지의 크기는 압축 및 gzip으로 압축된 약 94KB로 적당합니다.

브라우저는 총 6개의 요청으로 홈 페이지를 로드하고, 요청 시 로드되는 각 새 페이지는 단일 js 요청을 한 번 만듭니다(React의 모든 것은 HTML이 아니라 Javascript에 관한 것임을 기억하세요).

Page Size Inspector Report
URL: https://nextjs.tomicloud.com/

REQUEST                                       REQ     BYTES

TOTAL___________________________________________6____94,159

Document________________________________________1_______916
-nextjs.tomicloud.com/                                  916

Script__________________________________________4____92,836
-nextjs.tomicloud.com/_next.../index.js               1,053
-nextjs.tomicloud.com/_next/.../_app.js               2,506
-nextjs.tomicloud.com/_nex.../_error.js               2,490
-nextjs.tomicloud.com/.../main-6a4a..js              86,787

Stylesheet______________________________________1_______407
-nextjs.tomicloud.com/_nex.../style.css                 407

(내 Chrome 확장 프로그램인 Page Size Inspector를 통해 보고합니다.)