
@プレフィックスを使用してコンポーネントまたは画像をインポートするこのテンプレートから始める最良の方法は、Create Nextアプリを使用することです。
# pnpm
pnpm create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
# yarn
yarn create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
# npm
npx create-next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
プロジェクトをローカルに開始するには、実行してください。
pnpm dev http://localhost:3000を開き、ブラウザを使用して結果を確認します。
「このスターターは、next.js.機能に群を抜いて最高のタイプスクリプトスターターです。
- アラファト・ザハン
「next.js TypeScriptスターターリポジトリを、将来のnext.JSプロジェクトの強固な基盤として本当にお勧めします。」
- コルフィッツ
「素晴らしい仕事!」
- Soham Dasgupta
next.js typeScriptスターターで始まったWebサイトのリスト:
.github - CIワークフローを含むGithub構成。.husky - ハスキー構成とフック。public - robots.txt、画像、ファビコンなどの静的資産。src - ページ、コンポーネント、スタイルを含むアプリケーションソースコード。pnpm dev - http://localhost:3000で開発モードでアプリケーションを開始します。pnpm build - アプリケーションの最適化された生産ビルドを作成します。pnpm start - 生産モードでアプリケーションを開始します。pnpm type-check - TypeScriptコンパイラを使用してコードを検証します。pnpm lint - srcディレクトリ内のすべてのファイルに対してESLINTを実行します。pnpm lint:fix - srcディレクトリ内のすべてのファイルに対してESLINT修正を実行します。pnpm format - srcディレクトリ内のすべてのファイルに対してよりきれいに実行されます。pnpm format:check - フォーマットする必要があるファイルのきれいなリストを確認します。pnpm format:ci - CIのきれいなチェック。TypeScriptは、カスタムパスマッピングで事前に構成されています。コンポーネントまたはファイルをインポートするには、 @プレフィックスを使用します。
import { Button } from '@/components/Button' ;
// To import images or other files from the public folder
import avatar from '@/public/avatar.png' ;このスターターはデフォルトでPNPMを使用しますが、この選択はあなたのものです。 YARN/NPMに切り替えたい場合は、 pnpm-lock.yamlファイルを削除し、YARN/NPMで依存関係をインストールし、CIワークフローを変更し、ハスキーギットフックを変更してYARN/NPMコマンドを使用します。
注:糸を使用する場合は、windowsの糸でgitフックが失敗しないように、ハスキードキュメントからこれらの手順に従ってください。
T3 Envを使用して、環境変数を管理します。プロジェクトのルートに.env.localファイルを作成し、そこに環境変数を追加します。
追加の環境変数を追加する場合、 ./src/lib/env/client.ts /client.tsまたは./src/lib/env/server.tsのスキーマはそれに応じて更新する必要があります。
リダイレクトを追加するには、 redirects Arrayを./redirects.tsで更新します。タイプされているため、プロパティのオートコンプリートが表示されます。
コンテンツセキュリティポリシー(CSP)は、クロスサイトスクリプト(XSS)やデータインジェクション攻撃など、特定の種類の攻撃を検出および軽減するのに役立つセキュリティレイヤーです。 CSPは、 next.config.tsファイルに実装されています。
これには、アプリケーションのニーズに合わせてカスタマイズできるデフォルトと最小限のポリシーが含まれています。それは基盤を構築するための基盤です。
このプロジェクトは、MITライセンスに基づいてライセンスされています - 詳細については、license.mdファイルを参照してください。