mdnext
1.0.0
mdnext는 다음 JS + MDX 프로젝트를 폭파하는 도구의 생태계입니다.
새로운 프로젝트를 시작하고 싶으십니까?
# Using NPX we'll start up the mdnext CLI prompts --
npx mdnext
# You will first be prompted with.. --
What is the name of your project ?
# Then you will choose which template to use
Select which template to use ... MDX 기반 앱에서 구성 요소에 액세스하고 싶으십니까?
# Even though we're a Next based ecosystem, our `MDX` components should be usable in most React based applications
yarn add @mdnext/components
or
npm i @mdnext/components mdnext NextJS + MDX와 함께 일하는 데 힘을 실어주는 도구의 생태계입니다.
mdnext CLI는 공식적으로 유지 관리되는 컬렉션과 커뮤니티가 선택할 템플릿을 제출했습니다. 일단 선택되면 프로젝트는 깨끗한 커밋 역사와 함께 로컬로 복제되며 다음 프로젝트를 구축 할 준비가되었습니다.
@mdnext/components MDX 와 함께 작업하기위한 액세스 가능 (감사합니다 Chakraui) 및 확장 가능한 구성 요소를 제공합니다. 여기에는 스타일링 코드 블록을위한 Code 구성 요소 또는 MDX 에 풍부한 컨텐츠를 임베드하기위한 Iframes 포함됩니다.
mdnext 템플릿 컬렉션은 스타일, MDX (및 기타 데이터 소스)를 처리하고 미디어를 제공하며 가장 일반적인 워크 플로 (ECOMM / 블로그 / 제품 페이지)에 대한 의견이있는 NextJS 기반 프로젝트입니다. 공식적으로 유지 관리되는 템플릿 모음이 있지만 커뮤니티가 만든 것을보고 공유하게되어 기뻤습니다. 웹 개발자로서 다양한 의견과 편안함이 있으며 생태계에 액세스 할 수 있기를 원합니다.
mdnext-starter 의 기본 구조는 MDX 및 Next 사용하는 방식의 핵심 핵심 템플릿에서 볼 수 있습니다.
이 구조를 알게되면 현재의 모범 사례 (해석 할 수있는 자유롭게 해석 될 수 있습니다!)와 플러그 앤 플레이가 쉽습니다. 스타터로 뛰어 들자 :
jsconfig.js
다음 JS를 사용하면 앱의 절대 경로를 구성 할 수 있습니다. 우리는 이것을 사용하여 src 디렉토리 내부에서 모든 기능과 유틸리티를 쉽게 가져옵니다.
pages
페이지 디렉토리는 라우팅을 정의합니다. getStaticProps / getStaticPaths / getServerProps 와 같은 수명주기 방법은 페이지 수준에서 제공됩니다. 이곳에서 우리는 MDX 컨텐츠를 구성 요소로 전달할 수있는 데이터로 소비합니다.
*_app.js* nextjs를 사용하면 페이지를 초기화하는 데 사용되는 앱 구성 요소를 무시할 수 있습니다. 여기 더*_document.js* : 응용 프로그램의 <html> 및 <body> 태그를 보강 할 수 있습니다.all-data/index.js :이 페이지는 모든 개별 MDX 데이터 페이지에 대한 링크를 표시하는 예입니다. 여기서 우리는 getStaticProps 사용하여 구성 요소에 대한 MDX 파일의 프론트 매스터를 공급합니다.data/[slug].js : 여기서는 NextJS 동적 라우팅을 사용합니다. getStaticPaths 사용하면 동적 슬러그를 공급하여 모든 논리를 한 번 처리하고로드하는 각 MDX 데이터에 적용 할 수 있습니다. 이를 통해 getStaticProps 의 데이터와 일치하여 페이지와 구성 요소에 표시 할 수 있습니다.index.js : 앱의 루트에있는 우리의 페이지는 pages Directories index.js 내부에 있습니다. src src 디렉토리는 모든 클라이언트 코드를 보유합니다. 우리의 components , 사용자 정의 hooks , utility 기능 및 MDX 파일은 모두 여기에 살고 있으며 Absolute Path 가져 오기에 처음 3 개를 사용할 수 있습니까?
next.config.js environment variables , webpack , pageExtensions 등과 같은 내용의 사용자 정의 구성을 위해 next.config.js 사용할 수 있습니다.
각 템플릿에는 새로운 구성을 구성하는 추가 사항과 관련된 명시 적 문서가있는 자체 README 있습니다. 그렇지 않으면 각 템플릿이 코어에서 찾을 수 있으며 mdnext-starter 와 유사하게 시작합니다.
mdnext 내부의 템플릿은 새 웹 사이트를 시작할 때 마찰을 완화하도록 만들어졌습니다. 블로그, 개인 사이트, 고객 작업 등은 항상 시작하기가 매우 어려울 수 있습니다.
우리는 무엇을 달성해야합니까?
스타일링을 어떻게 처리합니까?
데이터를 어떻게 처리할까요?
인증을 통합하는 가장 좋은 방법은 무엇입니까?
이 템플릿의 의견을 통해 신속하게 시작하고 맞춤화 할 수는 있지만 맞춤화 할 수 있습니다.
현재 유지 관리되는 템플릿 :
mdnext-starter 이것은 모든 템플릿이 생성되는 가장 의견이 가장 적은 템플릿입니다. getStaticProps/Paths 내부에서 MDX 소싱하는 예제 이외의 매우 최소한의 구성과 의견이 있습니다.mdnext-blog 블로그 템플릿은 mdnext-starter 위에 기능을 추가합니다. 특히 스타일링을 위해 Chakra-UI 사용합니다. MDX 파일을 경로로 사용하여 페이지의 블로그 게시물 및 컨텐츠 수준의 구성. 블로그 게시물을 필터링하기위한 FuseJS . 이 템플릿을 실제로 확인하십시오!mdnext-overlays 새로운 스 트리머가 될 때 많은 도전에 직면하게됩니다. 결국 당신은 자신의 장면, 애니메이션 및 스트림 및 시청자의 상호 작용을 설정하고 싶을 것입니다. 당신이 좋아하는 도구를 만들기 위해 도구를 사용하지 않겠습니까? 이 구성을 사용하면 각각의 새 장면을 경로로 구성하기위한 기본 레이어로 설정합니다. 각 경로에는 Twitch API와 상호 작용하는 방법, Twitch 채팅 및 스트림 및 이벤트를 둘러싼 정보가 포함되어 있습니다!우리 커뮤니티 제출 템플릿 :
mdnext-tailwind Tailwind + mdnext 프로젝트로 빨리 일어나고 싶습니까? 이것이 답입니다. 새롭게 Tailwind 편안하게 느낄 수 있도록 리소스 모음과 함께 적절한 구성!mdnext-twin-macro 이 스타터는 스타일의 선택으로 twin.macro 로 구성됩니다. 이를 통해 하나의 오프 스타일에 대한 Tailwind's 유틸리티 클래스와 emotion's css 방법을 활용할 수 있습니다.mdnext-graphcms GraphCMS 데이터 소스로 사용하여 블로그의 기본 사항을 설정합니다. 그래프 CMS에서 마크 다운을 당기고 MDX 사용하여 UI에 공급하는 방법에 대한 간단한 예로 시작합니다.mdnext-reflexjs ReflexJS는 속도와 우수한 개발자 경험을 위해 제작 된 스타일링 라이브러리입니다. 시스템 UI 사양에 따라 스타일 소품 및 제약 조건을 사용하여 구성 요소를 스타일링 할 수 있습니다.새 템플릿을 제출하고 싶습니까? 기고 섹션으로 가서 mdnext-starter를 확인하십시오.
