snippetの紹介：Next.js 15で作られたエレガントなコードスニペットジェネレーター

2025年1月08日

Available in :

GitHubで公開した新しいオープンソースプロジェクトsnippetをご紹介できることを嬉しく思います。このツールを使用すると、コードスニペットをエレガントでプロフェッショナルなPNG画像に変換でき、X（Twitter）やLinkedIn、プレゼンテーションでの共有に最適です。Next.js 15とTailwind CSSで構築され、モダンで直感的な体験を提供します。

オンラインで直接使用できます！ > https://snippet.timoner.comで数クリックでコードスニペットを作成・共有できます

🚀 主な機能

30以上のプログラミング言語をサポート
高度なシンタックスハイライト
ソーシャルメディア向けに最適化された高品質PNG出力
各プラットフォームに適応した縦横フォーマット
直感的なユーザーインターフェース

🛠️ 使用技術

フロントエンド: Next.js 15, React, TypeScript
UI: Tailwind CSS, Shadcn/UI, Radix UI
ツール: html2canvas, react-syntax-highlighter
デプロイメント: Vercel

🔧 ローカルインストール（オプション）

貢献や独自インスタンスのホストを希望する場合：

bash
1# リポジトリのクローン
2git clone https://github.com/offroadlabs/snippet.git
3cd snippet
4
5# 依存関係のインストール
6bun install
7
8# 開発サーバーの起動
9bun dev

📝 使用例

インターフェースはシンプルで直感的です：

snippet.timoner.comにアクセス
エディターにコードを貼り付け
言語を選択し、外観をカスタマイズ
PNGにエクスポート
お好みのソーシャルネットワークで直接共有！

🎯 強み

パフォーマンス: 高速な生成のために最適化
柔軟性: 広範なカスタマイズオプション
モダン: 最新のテクノロジーバージョンを使用

🤝 貢献

プロジェクトはMITライセンスのオープンソースです。以下のご協力をお待ちしています：

⭐ リポジトリにスターを付ける
🐛 バグを報告
💡 改善を提案
🔧 コードに貢献

📚 詳細情報

詳しくは以下をご覧ください：

ご質問やご提案がありますか？hub.timoner.comで私のすべてのオープンソースプロジェクトを見つけ、ディスカッションの予約を取るか、GitHubで直接issueを開いてください。

Recommended next reads

Continue with these curated articles on the same topic.

2024年11月13日Next.js 15: TypeScriptフォームとPrismaとクリーンアーキテクチャ 🚀

ヘキサゴナルアーキテクチャに従ってNext.js 15で専門的なフォームシステムを作成する方法を学びましょう。機能には以下が含まれます：Zodによる型安全なバリデーション、shadcn/uiによるモダンなコンポーネント、Prismaによるデータ永続化。これらすべてをジェダイ・アカデミーの登録という楽しい例を通して説明します。単純なフォームを超えて、開発のベストプラクティスとモダンなReactアプリケーションアーキテクチャをカバーする完全なチュートリアルです。

2024年11月06日2分で理解するNext.js：究極のReactフレームワーク！

Next.js 14の実践的ガイド：App Router、Server Components、Server Actions、その他のモダン機能をマスターしよう。

2024年10月31日Next.js 15：発見すべき新機能のすべて

Next.js 15の新機能を発見しよう：新しいフック、Turbopack、改善されたSSR、そして強化されたTypeScriptサポート。

🔧 ローカルインストール（オプション）

貢献や独自インスタンスのホストを希望する場合：

bash

1# リポジトリのクローン
2git clone https://github.com/offroadlabs/snippet.git
3cd snippet
4
5# 依存関係のインストール
6bun install
7
8# 開発サーバーの起動
9bun dev

📚 詳細情報

詳しくは以下をご覧ください：