nextjs notion blog starter

Nextjsの概念ブログのスターター

• デフォルトのデモ - mainブランチから展開
• ブログのセットアップ - このスターターを使用してあなたのブログを始める方法に関する記事を書きました

特徴

• ✅セットアップには数分しかかかりません（単一のファイル設定）？

• convertKit API経由のニュースレターサブスクリプション

• umamiを使用した簡単な分析

• tailwindテンプレートを使用した自動OGソーシャル画像

• outual Automatic Pretty URL

• ✅ページの優れた速度

• next.jsおよびvercelに最適化されています

？一緒にビルドします

• フレームワーク：next.js、typeScript
• スタイリング：Tailwind CSS
• コンテンツ：概念API
• ニュースレター：ConvertKit
• 展開：Vercel

プロジェクトの概要

• layouts/* - 各ページで使用されるさまざまなレイアウト。
• components/* - サイト全体で使用されるコンポーネント。
• components/blocks/* - 概念レンダリング用に作成されたカスタムブロック。
• utils/* - 「ユーティリティ」の略、外部サービスの有用なユーティリティまたはコードのコレクション。
• pages/api/* -APIルーティング電源/og-imageダイナミックOG画像および/subscribe-convertkitニュースレターサブスクリプション。
• pages/blog/* - 概念APIから情報を取得する静的な事前にレンダリングされたブログページ。
• pages/* - 他のすべての静的ページ。
• public/* - 画像、フォント、ビデオなどの静的資産。
• styles/* - グローバルスタイルと追い風。
• siteData.tsサイトに関するグローバルデータを含む簡単なファイル。

？

git clone https://github.com/tuanphungcz/nextjs-notion-blog-starter
cd nextjs-notion-blog-starter
pnpm install
pnpm run dev

.env.exampleに似た.envファイルを作成し、適切なキーを含めます。

Vercelに展開します

 NOTION_SECRET=
BLOG_DATABASE_ID=

# ConvertKit is optional
NEXT_PUBLIC_CONVERTKIT_FORM_ID=
NEXT_PUBLIC_CONVERTKIT_API_KEY=

# Umami is optional
NEXT_PUBLIC_UMAMI_ID=
NEXT_PUBLIC_UMAMI_URL=

？‍♀️使用方法

• ブログのセットアップ - このスターターを使用してあなたのブログを始める方法に関する記事を書きました

クレジットとインスピレーション

このブログのスターターは、これらすべての素晴らしいオープンソースに触発されました

• @samuelkraftによるSamuelkraft-next
• @leerobによるLeerob.io
• @transitive-bullshitによるnext.js notionスターターキット
• @braydoncoyerによるbraydoncoyer.dev