Refactor codebase for improved type safety and maintainability - #154
Conversation
- Extract ProfileCard component from Layout - Simplify lib/posts.ts with helper functions and type inference - Fix Boolean -> boolean return type - Add stricter TypeScript options (noUnusedLocals, noUnusedParameters) - Remove redundant type annotations and unused imports - Remove deprecated passHref prop from Link - Remove duplicate font-family declaration in SCSS Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR refactors the Next.js/TypeScript codebase to improve maintainability and type-safety by extracting the profile UI into a dedicated component, simplifying post-loading utilities, tightening TypeScript compiler checks, and removing redundant code/styles.
Changes:
- Extracted a new
ProfileCardcomponent (and shared profile data) and updatedLayout+ layout tests accordingly. - Refactored
lib/posts.tsto reduce duplication (metadata extraction, sorting, ID validation) and improve typing. - Tightened TS compiler options and removed minor redundancies (e.g.,
passHref, duplicate CSS, unused params).
Reviewed changes
Copilot reviewed 10 out of 11 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
components/profile.tsx |
New profile component + profile metadata export. |
components/layout.tsx |
Uses ProfileCard and derives exported name from shared profile data. |
components/layout.test.tsx |
Updates assertions to use shared profile metadata. |
lib/posts.ts |
Refactors post metadata extraction, sorting, ID validation, and error type. |
app/page.tsx |
Removes redundant type annotation/import and removes passHref. |
app/posts/[id]/page.tsx |
Simplifies static params generation and adds props interface + sanitization comment. |
app/api/hello/route.ts |
Removes unused request parameter (aligns with stricter TS flags). |
__tests__/posts-page.test.tsx |
Updates tests for the posts page exports. |
__tests__/api-hello.test.ts |
Updates tests to call GET() without a dummy request. |
tsconfig.json |
Enables noUnusedLocals, noUnusedParameters, noFallthroughCasesInSwitch. |
styles/globals.scss |
Removes duplicate font-family override for .markdown-body. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Move Profile/ProfileLink types and profile constant to profile-data.ts to decouple data from React/Next.js dependencies. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 11 out of 13 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| interface PageProps { | ||
| params: Promise<{ id: string }>; | ||
| } |
There was a problem hiding this comment.
params is typed as Promise<{ id: string }> and then awaited, but in Next.js App Router params is passed as a plain object. Keeping it as a Promise can cause type-checking mismatches with Next’s generated PageProps types and forces callers/tests to wrap params in Promise.resolve. Recommend changing PageProps.params back to { id: string } and removing the unnecessary await usage in generateMetadata and PostPage.
| it('generateMetadataが正しいメタデータを返す', async () => { | ||
| const metadata = await generateMetadata({ params: { id: 'test-post' } }); | ||
| const metadata = await generateMetadata({ params: Promise.resolve({ id: 'test-post' }) }); | ||
| expect(metadata.title).toBe('テスト投稿タイトル - Nyantech'); | ||
| expect(metadata.description).toBe('テスト投稿タイトル'); | ||
| }); | ||
|
|
||
| it('投稿タイトルが表示される', async () => { | ||
| const params = { id: 'test-post' }; | ||
| const PostComponent = await PostPage({ params }); | ||
| const PostComponent = await PostPage({ params: Promise.resolve({ id: 'test-post' }) }); | ||
| render(PostComponent); |
There was a problem hiding this comment.
The tests now pass params: Promise.resolve(...) to match the page’s params: Promise<{id: string}> typing. If params is corrected to the standard { id: string } object (as Next.js provides at runtime), these tests should be updated back to pass a plain object to better reflect real usage and avoid unnecessary async wrappers.
Summary
ProfileCardcomponent fromLayoutfor better separation of concernslib/posts.tswith helper functions (extractMetadata) and leverage TypeScript inferenceBoolean→boolean)Changes
components/profile.tsxProfileCardcomponents/layout.tsxProfileCard, addedLayoutPropsinterfacelib/posts.tsPost extends PostSummaryapp/page.tsxpassHrefand unused importapp/posts/[id]/page.tsxPagePropsinterface, simplified param handlingtsconfig.jsonnoUnusedLocals,noUnusedParameters,noFallthroughCasesInSwitchstyles/globals.scssfont-familydeclarationTest plan
npm test)npm run build)npm run lint)🤖 Generated with Claude Code