next boilerplate

Bye Bye 다음 보일러 플레이트, Supplate에 오신 것을 환영합니다!

우리가 차세대 보일러 플레이트 프로젝트를 시작한 지 오랜 시간이 지났습니다. 우리는 전 세계의 많은 프론트 엔드 개발자들이 프론트 엔드 개발주기를 가속화하는 데 도움이 된 것을 자랑스럽게 생각합니다.

시간이 지남에 따라, 우리는 경험과 커뮤니티 피드백에서 귀중한 교훈을 얻었습니다.

• 무한한 수의 프론트 엔드 기술이 있으며 단일 보일러 플레이트 제품의 모든 것을 결합하는 것은 불가능합니다.
• 이 프로젝트는 수많은 외부 의존성으로 유지하기가 어렵습니다.

복잡성 문제를 해결하기 위해 우리는 새로운 프로젝트를 처음부터 시작했습니다. 우리는 이것을 "슈퍼 플레이트" - 초강대국이있는 프론트 엔드 보일러 플레이트라고 부릅니다.

플러그인 아키텍처 위에 구축되었으며 자신의 도구와 모범 사례를 쉽게 통합 할 수 있습니다. 또한 좋아하는 도구의 30 개 이상의 내장 플러그인도 포함되어 있습니다.

슈퍼 플레이트의 기본 프레임 워크는 Next.js이므로 다음 보일러 플레이트 대신 즉시 사용할 수 있습니다. 더 많은 프레임 워크 목표가 곧 출시 될 예정입니다.

Repo 페이지 또는 문서에서 프로젝트를 확인할 수 있습니다.

다음 보일러 플레이트

Performance Deriented Next.js Application Boilerplate Redux, TypeScript, Express.js 및 Sass가있는 보일러 플레이트.

_{Pankod에 의해 만들어졌습니다}

에 대한

Next.js는 브라우저와 서버에서 실행되는 최소한의 반응 프레임 워크입니다. 개발자에게 시작하는 쉬운 방법을 제공하며 템플릿을 위해 React.js를 사용하므로 React Experience가있는 개발자가 생산성을 빠르게 얻을 수있는 간단한 방법이기도합니다.

이 접근법의 장점은 Google 및 기타 검색 엔진에서 우수한 순위를 높이는 SEO (검색 엔진 최적화) 요소를 손상시키지 않으면 서 균일 한 방식으로 풍부한 사용자 경험을 만들 수 있다는 것입니다.

이 보일러 플레이트를 사용하면 잘 구조화 된 Next.js 및 TypeScript Application을 사용하여 일어나고 실행할 수 있습니다.

특징

Next-BoilerPlate 프로젝트는 상자 밖에서 많은 기능을 제공합니다. 포함 된 구성 요소 및 도구에 대한 개요는 다음과 같습니다.

• JS -JS- 서버 렌더링 된 React Applications의 최소 프레임 워크.
• TypeScript- 주로 정적 유형, 클래스 및 인터페이스를 제공하는 JavaScript의 Superset.
• Redux- JavaScript 앱을위한 예측 가능한 상태 컨테이너.
• Express.js- 서버 측 렌더링을 처리하고 Next.js와 통합하는 최소 및 유연한 Node.js 웹 응용 프로그램 프레임 워크.
• 내장 프로젝트 CLI- 내장 CLI를 사용하여 하나의 명령으로 페이지, 구성 요소, 작업, 리더러를 만듭니다.
• SASS/SCSS -CSS Preprocessor는 변수, 중첩 규칙 및 믹스 인 (때로는 구문 설탕이라고 함)과 같은 특수 기능을 일반 CSS에 추가합니다.
• DOCKER- 컨테이너를 사용하여 응용 프로그램을보다 쉽게 작성, 배포 및 실행할 수 있도록 설계된 도구입니다.
• Babel- 차세대 JavaScript의 컴파일러.
• Eslint- 플러그 가능한 린팅 유틸리티.
• 리버스 프록시 - API 요청을 프록시하기위한 경량 서버.
• Bundler Analyzer- 대화식 확대 실용적인 Treemap으로 웹 팩 출력 파일의 크기를 시각화합니다.
• JEST -JavaScript Testing Framework, React를 만든 개발자가 만든 JavaScript 테스트 프레임 워크.
• React Testing Library- 좋은 테스트 관행을 장려하는 간단하고 완전한 React DOM 테스트 유틸리티.
• Next-Runtime-Dotenv- 환경 변수를 Next.js의 런타임 구성에 노출시킵니다.
• Next-I18next- 국제화-프레임 워크는 키, 일부 옵션을 취하고 현재 언어의 값을 반환하는 함수를 제공합니다. 앱에 언어 번역 지원을 추가하는 데 도움이됩니다.
• 스토리 북 - 반응을 위해 UI 구성 요소를 분리하여 UI 구성 요소를 개발하기위한 오픈 소스 도구.
• Bootstrap- 반응 형 모바일 우선 웹 사이트를 개발하기위한 가장 인기있는 HTML, CSS 및 JavaScript 프레임 워크.

설정 및 문서

새 앱을 만들려면 설정 안내서를 참조하십시오.

자세한 내용은 https://pankod.github.io/next-boilerplate/을 확인하십시오.

내장 CLI

Pankod Boilerplate에는 새로운 구성 요소의 생성을 간소화하기 위해 CLI 도구가 제공됩니다. CLI 도구를 사용하면 프로젝트에 페이지, 클래스 구성 요소 또는 기능 구성 요소를 쉽게 추가 할 수 있으며 필요한 모든 작업, 리더러 및 가져 오기가 자동으로 생성 될 수 있습니다.

CLI를 시작하려면 아직 CLI를 설치하지 않으면 미리 설치해야 할 수도 있습니다.

 ~ $ npm i -g @pankod/pankod-cli

그런 다음 프로젝트에서 사용할 수 있습니다.

 ~ $ npm run cli

시작 후 대화식 메뉴를 사용하면 작성할 구성 요소를 구성 할 수 있습니다. 첫째, 구성 요소의 유형이 페이지인지 기능 구성 요소인지에 대한 요청을받습니다. 그런 다음 선택과 관련된 다른 옵션이 표시됩니다.

결국, 스타일 및 테스트 파일이있는 페이지 나 구성 요소로 끝나게됩니다.

특허

MIT 라이센스에 따라 라이센스가 부여 된 저작권 © 2018-Present Pankod