ポートフォリオサイト
- IT KINGDOMでの学習の一環で作成しました。
使用している技術、サービスおよびライブラリ
- クラス名を結合するユーティリティ
- 本プロジェクトでは、CSSモジュールでハイフン付きの複数のクラス名を指定するのに使用しています。
- 関連記事
- CSSモジュールは、一意のクラス名を自動的に作成することで、クラス名の衝突を気にすることなく、異なるファイルで同じCSSクラス名を使用することができます。
- Next.jsでは、[name].module.cssというファイル名名規則でCSSモジュールをサポートしています。
- 日付と時刻をパース・検証・操作・表示するJavaScriptライブラリ
- envファイルの環境変数を用いてコマンドを実行するNodeプログラム。
- 関連記事
- JavaScriptの問題を静的解析してみつけるツール。
- eslint
- eslint-config-next: Babelパーサーを使用したESLintの設定により、Next.jsの最先端機能をサポート
- eslint-config-prettier: 不要なルールやPrettierと衝突する可能性のあるルールをすべてオフにします。
- Next.js公式の説明
- Facebookが作成したAPI用のクエリ言語であるGraphQLのJavaScriptリファレンス実装。
- GraphQLのスキーマとクエリ文書を元に、クライアントコードを生成するツール。
- スクリプトやシンプルなアプリのためにNodeやブラウザをサポートする最小限のGraphQLクライアント
- Reactのためのプリミティブで柔軟な状態管理ライブラリ
- 本プロジェクトでは、Mantaine等の仕組みを使わず、現在モバイル用のUIとすべきかをアプリ全体で知るために使っています。
- コンポーネントライブラリ
- @mantine/core: コアコンポーネントライブラリ：インプット、ボタン、オーバーレイなど。
- @mantine/form: フォーム管理のライブラリ
- @mantine/hooks: 状態やUIを管理するためのフック
- @mantine/next: Next.jsでMantineのサーバーサイドレンダリングを設定するためのユーティリティ
- @mantine/notifications: 通知システム
- APIベースの日本製ヘッドレスCMS
- JavaScript及びNode.jsアプリケーションからmicroCMSを使うためのライブラリ
- Webアプリケーションを構築するためのReactライブラリ
- ユーザインターフェース構築のための JavaScript ライブラリ
- データ取得のための React Hooks ライブラリ
- Twitterにプログラム的にアクセスすることを可能にするAPI
- Twitter API v2を使用
- JavaScriptに静的型システムを付け加えたプログラミング言語
環境変数
詳細
This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm run dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
Learn More
To learn more about Next.js, take a look at the following resources:
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.