Vercel Hobby枠で個人プロジェクトを回す実務Tips：TypeScriptとNext.jsの活用
はじめに
Vercelは、Next.jsやCreate React Appなどのフロントエンドフレームワークをサポートしているホスティングサービスです。特に、個人プロジェクトや小規模プロジェクトに適したHobby枠を提供しています。この記事では、Vercel Hobby枠で個人プロジェクトを回す実務Tipsについて、TypeScriptとNext.jsの活用に焦点をあてて紹介します。
TypeScriptの活用
TypeScriptは、JavaScriptの拡張言語であり、静的型付けを提供します。Next.jsプロジェクトでは、TypeScriptを使用することで、コードの品質と保守性を向上させることができます。
// tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
Next.jsの活用
Next.jsは、Reactを基盤とするサーバーサイドレンダリング対応のフレームワークです。Vercelでは、Next.jsプロジェクトを簡単にデプロイすることができます。
// pages/_app.js
import Head from 'next/head';
function MyApp({ Component, pageProps }) {
return (
<div>
<Head>
<title>My App</title>
</Head>
<Component {...pageProps} />
</div>
);
}
export default MyApp;
Vercel Hobby枠の設定
Vercel Hobby枠では、以下の設定が可能です。
- プロジェクトの作成
- ドメインの設定
- ビルドとデプロイの設定
# vercel.json
{
"version": 2,
"builds": [
{
"src": "next.config.js",
"use": "@vercel/static-build"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "index.html"
}
]
}
まとめ
この記事では、Vercel Hobby枠で個人プロジェクトを回す実務Tipsについて、TypeScriptとNext.jsの活用に焦点をあてて紹介しました。Vercel Hobby枠を使用することで、個人プロジェクトや小規模プロジェクトを簡単にデプロイすることができます。詳しい手順はこちら → https://felixstudio0.gumroad.com/?utm_source=qiita&utm_medium=github_actions&utm_campaign=2026-q1&utm_content=qiita-footer