Set up GitHub Actions workflow with environment variable support for Next.js base path #1
Conversation
WalkthroughA new client component for rendering blog posts was introduced, and the blog post page was refactored to use server-side data fetching with static path generation. Image path handling was updated in blog cards to support environment-based prefixes. Minor formatting changes were made to configuration files, and a new dependency was added. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant NextServer as Next.js Server (app/a/[slug]/page.tsx)
participant BlogLib as Blog Library (getPostBySlug)
participant BlogPostPage as BlogPostPage (Client Component)
User->>NextServer: Request /a/[slug]
NextServer->>BlogLib: getPostBySlug(slug)
BlogLib-->>NextServer: BlogPost data
NextServer->>BlogPostPage: Render with post prop
BlogPostPage-->>User: Rendered blog post page
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
components/blog-card.tsx (2)
19-20: Consider making the BASE_PATH configurable.The hardcoded "/StableViewpoints" path works for this specific deployment but reduces portability. Consider using an environment variable or Next.js configuration.
-const BASE_PATH = process.env.NODE_ENV === "production" ? "/StableViewpoints" : "" +const BASE_PATH = process.env.NODE_ENV === "production" ? (process.env.NEXT_PUBLIC_BASE_PATH || "/StableViewpoints") : ""
23-24: Remove unnecessary whitespace.The extra blank lines don't add value and should be removed for cleaner code.
-export default function BlogCard({ post }: BlogCardProps) { - - +export default function BlogCard({ post }: BlogCardProps) {app/a/[slug]/BlogPostClient.tsx (1)
10-11: Consider centralizing BASE_PATH logic.The BASE_PATH constant is duplicated across multiple components. Consider moving it to a shared configuration file or utility function.
Create a new file
lib/config.ts:export const BASE_PATH = process.env.NODE_ENV === "production" ? "/StableViewpoints" : ""Then import it in both components:
-// Conditionally set BASE_PATH based on environment -const BASE_PATH = process.env.NODE_ENV === "production" ? "/StableViewpoints" : "" +import { BASE_PATH } from "@/lib/config"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (6)
app/a/[slug]/BlogPostClient.tsx(1 hunks)app/a/[slug]/page.tsx(1 hunks)components/blog-card.tsx(2 hunks)lib/blog.ts(0 hunks)next.config.mjs(2 hunks)package.json(2 hunks)
💤 Files with no reviewable changes (1)
- lib/blog.ts
🧰 Additional context used
🧬 Code Graph Analysis (2)
app/a/[slug]/BlogPostClient.tsx (4)
lib/blog.ts (1)
BlogPost(3-12)components/ui/calendar.tsx (1)
Calendar(66-66)lib/markdown-renderer.tsx (1)
MarkdownRenderer(5-90)components/footer.tsx (1)
Footer(25-78)
app/a/[slug]/page.tsx (2)
lib/blog.ts (2)
getAllPosts(15-27)getPostBySlug(29-32)app/a/[slug]/BlogPostClient.tsx (1)
BlogPostPage(13-89)
🔇 Additional comments (5)
next.config.mjs (1)
1-1: LGTM! Clean formatting improvements.The formatting changes (empty line, trailing comma, semicolon) improve code consistency without affecting functionality.
Also applies to: 13-13, 16-16
components/blog-card.tsx (1)
38-42: LGTM! Proper environment-aware image URL handling.The conditional BASE_PATH prefixing correctly handles relative vs absolute URLs and aligns with the PR's goal of supporting GitHub Pages deployment.
app/a/[slug]/BlogPostClient.tsx (1)
13-89: Excellent implementation of the blog post page component.The component structure is well-organized with proper:
- TypeScript typing with BlogPost interface
- Semantic HTML structure
- Accessibility attributes
- Environment-aware image handling
- Australian date formatting
- Responsive design patterns
- Proper Next.js Image usage with priority flag
The separation of concerns between server and client components aligns with Next.js 13+ best practices.
app/a/[slug]/page.tsx (2)
5-8: LGTM! Proper static generation setup.The
generateStaticParamsfunction correctly generates static paths for all blog posts, which is essential for the GitHub Pages deployment.
14-19: Excellent error handling and component delegation.The
notFound()call properly handles missing posts, and delegating UI rendering to theBlogPostPageclient component maintains clean separation of concerns.
| "serve": "^14.2.4", | ||
| "tailwind-merge": "^2.5.5", | ||
| "tailwindcss-animate": "^1.0.7" |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Move serve to devDependencies or reference it in scripts
serve is typically used only for local/static previews and is not required at runtime in a Next.js production deployment (GitHub Pages will host the static files directly, and next start is used for SSR targets). Keeping it under dependencies unnecessarily bloats the production bundle size (~10 MB) and increases install time.
Either:
- Reference
servein a script (e.g."preview": "serve out") and move it todevDependencies, or - Remove it altogether if it isn’t used.
Example refactor:
- "dependencies": {
- ...
- "serve": "^14.2.4",
- ...
- },
+ "dependencies": {
+ ...
+ },
+ "devDependencies": {
+ ...
+ "serve": "^14.2.4",
+ ...
+ }Run:
to confirm its current usage before adjusting.
🏁 Script executed:
#!/bin/bash
# Check if 'serve' is actually invoked anywhere
rg -n '"serve' --glob package.json
rg -n '\bserve\b' --type js --type ts --type json --type ymlLength of output: 167
🏁 Script executed:
#!/bin/bash
# Show the scripts section in package.json to see if 'serve' is referenced
rg -A 10 '"scripts": {' --glob package.json
# Search for any standalone 'serve' references across key file types
rg -n '\bserve\b' -g '*.js' -g '*.jsx' -g '*.ts' -g '*.tsx' -g '*.json' -g '*.yml' -g '*.yaml'Length of output: 3821
#!/bin/bash
# Print the scripts section from package.json to check for any 'serve' references
jq '.scripts' package.json🏁 Script executed:
#!/bin/bash
# Extract the scripts section from package.json to check for any 'serve' usage
jq '.scripts' package.jsonLength of output: 123
Move serve to devDependencies or remove
We confirmed there are no references to serve in any npm scripts or source files. It’s only needed for local/static previews and should not live in dependencies.
• File: package.json (lines 20–22)
• Next steps (choose one):
- Move
serveintodevDependenciesand add a preview script, e.g.:"scripts": { "preview": "serve out" }
- Remove
serveentirely if you’re not using it.
Example diff:
- "dependencies": {
- ...
- "serve": "^14.2.4",
- ...
- },
+ "dependencies": {
+ ...
+ },
+ "devDependencies": {
+ ...
+ "serve": "^14.2.4",
+ ...
+ }🤖 Prompt for AI Agents
In package.json around lines 20 to 22, the "serve" package is incorrectly listed
under dependencies but is only used for local/static previews. Move "serve" from
dependencies to devDependencies and add a new npm script named "preview" with
the command "serve out" to enable easy local preview. Alternatively, if "serve"
is not used at all, remove it entirely from the dependencies section.
2 participants
Summary:
This PR sets up a GitHub Actions workflow to build and deploy our Next.js site to GitHub Pages. It also introduces dynamic base path handling in the app by using process.env.NODE_ENV to switch the BASE_PATH for correct asset and route resolution in production.
Changes made:
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Refactor
Style
Chores