mdnext
1.0.0
MdNext é um ecossistema de ferramentas para obter seus próximos projetos MDX.
Procurando iniciar um novo projeto?
# 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 ... Só deseja acessar componentes em seus aplicativos baseados em 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 é um ecossistema de ferramentas para capacitar o trabalho com o NextJS + MDX.
O mdnext CLI superfície uma coleção oficialmente mantida e modelos enviados da comunidade para escolher. Uma vez escolhido, o projeto é clonado localmente com um histórico de comprometimentos limpos e você está pronto para construir seu próximo projeto.
@mdnext/components oferece acessíveis (obrigado chakraui) e componentes extensíveis para trabalhar com MDX . Isso inclui coisas que você viu como componentes Code para estilizar blocos de código ou Iframes para incorporar conteúdo rico ao MDX
A coleção de modelos mdnext são projetos baseados no próximoJS com opiniões sobre como estilizar, lidar com MDX (e outras fontes de dados), entregar mídia e lidar com os fluxos de trabalho mais usuais (Páginas de ECMOM / Blogs / Produto). Embora exista uma coleção oficialmente mantida de modelos, fiquei empolgado em ver e compartilhar o que a comunidade criou. Sei que há muitas opiniões e confortos diferentes como desenvolvedor da Web e deseja que nosso ecossistema esteja acessível.
A estrutura básica do mdnext-starter pode ser vista em todos os outros modelos em sua essência de como utiliza MDX e Next .
Conhecer essa estrutura ajudará a informá -lo das melhores práticas atuais que estão sendo seguidas (que são livres para interpretar!) E é fácil o suficiente para conectar e reproduzir. Vamos mergulhar na partida:
jsconfig.js
NextJs nos permite configurar caminhos absolutos para o nosso aplicativo. Usamos isso para importar facilmente todas as nossas funções e serviços públicos dentro do nosso diretório src
pages
O diretório de páginas define seu roteamento. Métodos do ciclo de vida como getStaticProps / getStaticPaths / getServerProps estão disponíveis no nível da página. É aqui que consumimos nosso conteúdo de MDX como dados para passar para nossos componentes.
*_app.js* NextJs permite substituir o componente do aplicativo, usado para inicializar as páginas. Mais aqui*_document.js* : permite aumentar as tags <html> e <body> do nosso aplicativo.all-data/index.js : Esta página é um exemplo de exibição de links para todas as suas páginas de dados MDX individuais. Aqui, usamos getStaticProps para alimentar o frontmatter de nossos arquivos MDX para nossos componentes.data/[slug].js : Aqui utilizamos o roteamento dinâmico do NextJS. Ao usar getStaticPaths somos capazes de alimentar uma lesma dinâmica, manipulando toda a lógica uma vez e aplicando -a a cada dados MDX que carregamos. Isso nos permite corresponder aos nossos dados no getStaticProps e exibi -los na página e em nossos componentes.index.js : Nossa página na raiz do nosso aplicativo vive dentro das pages Directories index.js . src Nosso diretório src detém todo o código do nosso cliente. Nossos components , hooks personalizados, funções utility e nossos arquivos MDX vivem aqui, com os três primeiros disponíveis para importações de caminho absoluto?
next.config.js para configuração personalizada em torno de coisas como environment variables , webpack , pageExtensions e muito mais, você pode utilizar next.config.js
Cada modelo terá seu próprio README com documentação explícita referente às adições que compõem a nova configuração. Caso contrário, você encontrará cada modelo em seu núcleo, começar de maneira semelhante ao mdnext-starter
Os modelos dentro do mdnext foram feitos para aliviar o atrito ao iniciar um novo site. Blogs, sites pessoais, trabalho de cliente, etc, sempre podem parecer muito assustadores para começar.
O que temos que realizar?
Como lidamos com o estilo?
Como vou lidar com dados?
Qual é a melhor maneira de integrar a autenticação?
As opiniões nesses modelos o iniciarão rapidamente e permitirão que você personalize o modo como achar melhor.
Nossos modelos atualmente mantidos:
mdnext-starter Este é o modelo menos opinativo, de que todos os modelos são criados. Ele abriga configuração e opinião muito mínimas fora de um exemplo de fornecimento de MDX dentro do getStaticProps/Pathsmdnext-blog Os modelos de blog adicionam recursos no topo do nosso mdnext-starter . Especificamente usando Chakra-UI para estilo. Configuração para postagens de blogs na página e no nível de conteúdo usando nossos arquivos MDX como rotas. FuseJS para filtrar os posts de nossos blogs. Verifique este modelo em ação!mdnext-overlays Ao se tornar uma nova serpentina, você recebe muitos desafios. Eventualmente, você vai querer configurar suas próprias cenas, animações e interações para o seu fluxo e seus espectadores. Por que não usar as ferramentas que você gosta de criá -las? Com esta configuração, você está configurado com uma camada base para configurar cada nova cena como uma rota. Cada rota contém maneiras de interagir com as APIs do Twitch, seu bate -papo por contas e informações em torno do seu fluxo e seus eventos!Nossa comunidade enviou modelos:
mdnext-tailwind quer subir e funcionar rapidamente com um projeto de Tailwind + mdnext ? Esta é a resposta. Uma configuração adequada ao lado de uma coleção de recursos para que os novos no Tailwind se sintam confortáveis!mdnext-twin-macro Este iniciante é configurado com twin.macro , pois é a escolha do estilo. Isso permite que você utilize as aulas de utilidade Tailwind's e o método css emotion's para um estilos fora.mdnext-graphcms Utilizando GraphCMS como nossa fonte de dados, configuramos o básico para um blog. Começa você com um exemplo simples de como você pode puxar o Markdown do Graphcms e alimentá -lo com nossa interface do usuário com nosso MDXmdnext-reflexjs REFLEXJS é uma biblioteca de estilo construída para velocidade e excelente experiência do desenvolvedor. Você pode estilizar seus componentes usando adereços e restrições de estilo com base nas especificações da interface do sistema do sistema.Quer enviar um novo modelo? Vá para nossa seção contribuinte e confira MdNext-Starter
