Live demo#89
Conversation
…ons, including project structure, CLI tool, and basic styling. Added .gitignore, package.json, and README.md for project setup and documentation.
…ng for ignored files.
WalkthroughEstablishes a new Help Center Framework project—a CLI-driven Next.js application for creating help centers with static article and category pages, search functionality, theming support, and deployment capabilities. Introduces project scaffolding, configuration management, CLI tools, data structures, React pages, and global styling. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CLI as help-center.js
participant FS as File System
participant NPM as npm
participant Template as Default Template
User->>CLI: run create my-help
CLI->>CLI: prompt for title, description
User->>CLI: provide project details
CLI->>FS: create project directory
CLI->>Template: copy templates/default
Template->>FS: populate files
CLI->>FS: write help-center.config.js
CLI->>NPM: npm install
NPM->>NPM: install dependencies
CLI->>User: print setup instructions
sequenceDiagram
participant Browser
participant NextJS as Next.js (Build/Serve)
participant Pages
participant Data
Browser->>NextJS: request /
NextJS->>Pages: render pages/index.js
Pages->>Data: read categories & articles
Data->>Pages: return data
Pages->>Browser: render homepage with category cards
Browser->>Browser: user searches/types
Pages->>Pages: filter articles by query
Pages->>Browser: render search results
Browser->>Browser: user clicks category
Browser->>NextJS: request /category/[categoryId]
NextJS->>Pages: getStaticProps for category
Pages->>Data: fetch category & articles
NextJS->>Browser: render category page
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (9)
.gitignore (1)
1-5: Good foundation; consider adding common Node.js/Next.js patterns.The core patterns are solid for a Next.js project. However, consider expanding coverage for environment variables, IDE configs, and build artifacts to prevent accidentally committing sensitive or transient files.
node_modules/ .next/ +.env*.local +out/ +dist/ +.vscode/ +.idea/ +*.swp +*.swo +npm-debug.log* +yarn-error.log* -.env.local .DS_StoreThe key improvements:
.env*.localcatches all local environment files (.env.development.local,.env.test.local, etc.)out/anddist/cover build outputs- IDE configs and editor artifacts prevent committing project-specific settings
- Log files prevent noise in version control
If deploying to Vercel, also add
.vercel/.styles/Article.module.css (1)
1-18: Consider extracting shared styles to reduce duplication.The
.containerand.backLinkstyles are duplicated instyles/Category.module.css. Consider extracting these common styles into a shared CSS module or using a common layout component to maintain consistency and reduce maintenance overhead.README.md (1)
30-41: Specify language for fenced code block.The fenced code block showing the project structure should specify a language identifier for proper syntax highlighting and linter compliance.
Apply this diff:
-``` +```text my-help-center/ ├── content/ │ ├── docs/bin/help-center.js (2)
14-38: Validate project name to prevent issues.The project name is used directly to create a directory without validation. Invalid characters, reserved names (like
node_modules), or existing directories could cause problems.Add validation before creating the directory:
.action(async (projectName) => { + // Validate project name + if (!/^[a-z0-9-_]+$/i.test(projectName)) { + console.error(chalk.red('Project name can only contain letters, numbers, hyphens, and underscores.')); + process.exit(1); + } + + const projectPath = path.join(process.cwd(), projectName); + if (fs.existsSync(projectPath)) { + console.error(chalk.red(`Directory ${projectName} already exists.`)); + process.exit(1); + } + console.log(chalk.blue(`Creating new help center: ${projectName}`));
72-78: Add error handling for build command.Similar to the npm install issue, the build command should have error handling.
Apply this diff:
.action(() => { console.log(chalk.blue('Building help center...')); - execSync('next build', { stdio: 'inherit' }); + try { + execSync('next build', { stdio: 'inherit' }); + console.log(chalk.green('Build completed successfully!')); + } catch (error) { + console.error(chalk.red('Build failed. Please check the error messages above.')); + process.exit(1); + } });lib/config.js (1)
56-73: Consider additional baseUrl validation.While checking that
baseUrlstarts with/is good, the validation could be more comprehensive to catch common mistakes.Apply this diff to add more robust validation:
// Validate baseUrl format if (!config.baseUrl.startsWith('/')) { throw new Error('baseUrl must start with /'); } + if (config.baseUrl !== '/' && config.baseUrl.endsWith('/')) { + throw new Error('baseUrl should not end with / (except for root path)'); + } + if (config.baseUrl.includes('//')) { + throw new Error('baseUrl should not contain consecutive slashes'); + } return true; }pages/index.js (3)
29-33: Use configuration for branding instead of hardcoded values.The logo text "Acme Corp" is hardcoded, but the framework has a configuration system (
lib/config.jsandhelp-center.config.js) with atitlefield that should be used for consistency.Import and use the config:
+import config from '../lib/config'; + export default function Home() { const [query, setQuery] = useState(''); + const siteConfig = config.get(); // ... rest of component return ( <div className={styles.container}> <header className={styles.header}> - <Link href="/" className={styles.logo}>Acme Corp</Link> + <Link href="/" className={styles.logo}>{siteConfig.title}</Link> </header>
80-98: Footer contains hardcoded placeholder values.The footer has hardcoded navigation links (lines 85-88) and social media URLs (lines 91-96) that should be configurable or removed if not needed. These placeholders may not match the actual application structure.
Consider one of these approaches:
Use footer config from
help-center.config.js:
The config file already has afooter.linksstructure that could be rendered here.Remove placeholder links if not needed:
If the framework doesn't include these routes, remove the hardcoded footer nav.Make social links configurable:
Add social media URLs to the config file instead of hardcoding them.
61-77: Consider memoizing article count calculation.The article count for each category is recalculated on every render (line 63). For better performance, especially with larger datasets, consider computing this once.
Use
useMemoto cache the calculation:+import { useState, useMemo } from 'react'; export default function Home() { const [query, setQuery] = useState(''); + + const categoriesWithCounts = useMemo(() => + categories.map(cat => ({ + ...cat, + articleCount: articles.filter(article => article.category === cat.id).length + })), + [] + ); // ... in render: ) : ( <div className={styles.categories}> - {categories.map(cat => { - const categoryArticles = articles.filter(article => article.category === cat.id); + {categoriesWithCounts.map(cat => { return ( <Link key={cat.id} href={`/category/${cat.id}`} className={styles.categoryCard}> {/* ... */} <div className={styles.articleCount}> - {categoryArticles.length} articles + {cat.articleCount} articles </div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (16)
.gitignore(1 hunks)README.md(1 hunks)bin/help-center.js(1 hunks)data.js(1 hunks)lib/config.js(1 hunks)next.config.js(1 hunks)package.json(1 hunks)pages/_app.js(1 hunks)pages/article/[articleId].js(1 hunks)pages/category/[categoryId].js(1 hunks)pages/index.js(1 hunks)styles/Article.module.css(1 hunks)styles/Category.module.css(1 hunks)styles/Home.module.css(1 hunks)styles/globals.css(1 hunks)templates/default/help-center.config.js(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (5)
pages/index.js (3)
data.js (4)
articles(8-15)articles(8-15)categories(1-6)categories(1-6)pages/article/[articleId].js (1)
article(11-11)pages/category/[categoryId].js (1)
categoryArticles(12-12)
pages/article/[articleId].js (2)
pages/category/[categoryId].js (4)
getStaticPaths(5-8)paths(6-6)getStaticProps(10-14)category(11-11)data.js (4)
articles(8-15)articles(8-15)categories(1-6)categories(1-6)
bin/help-center.js (1)
lib/config.js (2)
path(1-1)fs(2-2)
pages/category/[categoryId].js (2)
pages/article/[articleId].js (5)
getStaticPaths(5-8)paths(6-6)getStaticProps(10-14)category(12-12)article(11-11)data.js (4)
categories(1-6)categories(1-6)articles(8-15)articles(8-15)
lib/config.js (1)
bin/help-center.js (5)
path(4-4)require(3-3)require(8-8)fs(5-5)config(45-51)
🪛 Biome (2.1.2)
styles/globals.css
[error] 4-4: Duplicate font names are redundant and unnecessary: Sans
Remove duplicate font names within the property
(lint/suspicious/noDuplicateFontNames)
pages/article/[articleId].js
[error] 21-21: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
🪛 markdownlint-cli2 (0.18.1)
README.md
30-30: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🔇 Additional comments (8)
styles/globals.css (1)
4-4: Static analysis false positive - font stack is correct.The Biome warning about duplicate font names is a false positive. The font stack contains "Fira Sans", "Droid Sans", and "sans-serif", which are distinct: the first two are specific font families, while "sans-serif" is a generic fallback. This is a standard, correct font-stack pattern.
next.config.js (1)
1-4: LGTM!The Next.js configuration is minimal and correct. Enabling
reactStrictModeis a best practice that helps identify potential problems in the application.styles/Home.module.css (1)
1-178: LGTM!The CSS module is well-structured with clean, modern styling. The responsive grid layout using
auto-fitand the consistent use of transitions for hover states provide a good user experience.pages/_app.js (1)
1-12: LGTM!The Font Awesome setup correctly follows the recommended pattern for Next.js: manually importing the CSS and disabling automatic CSS injection prevents duplicate styles. The custom App component structure is standard and correct.
styles/Category.module.css (1)
1-55: LGTM!The CSS module provides clean, consistent styling for the category page with appropriate hover states and transitions.
templates/default/help-center.config.js (1)
1-68: LGTM! Template configuration is well-structured.The configuration object provides a comprehensive default setup with navbar, footer, and theme options. The placeholder URLs in the footer (lines 55, 59) are appropriate for a template that users will customize.
pages/category/[categoryId].js (1)
16-31: Component logic is correct.The CategoryPage component properly renders the category information and article list with appropriate navigation links.
lib/config.js (1)
9-22: Config loading is correctly implemented with fallback.The
load()method properly handles missing or invalid config files by falling back to defaults. The error logging on line 18 provides useful debugging information.
| const projectPath = path.join(process.cwd(), projectName); | ||
|
|
||
| // Create project directory | ||
| fs.mkdirSync(projectPath, { recursive: true }); | ||
|
|
||
| // Copy template files | ||
| const templatePath = path.join(__dirname, '../templates/default'); | ||
| fs.copySync(templatePath, projectPath); | ||
|
|
||
| // Create config file | ||
| const config = { | ||
| title: answers.title, | ||
| description: answers.description, | ||
| theme: 'default', | ||
| baseUrl: '/', | ||
| favicon: 'img/favicon.ico' | ||
| }; | ||
|
|
||
| fs.writeFileSync( | ||
| path.join(projectPath, 'help-center.config.js'), | ||
| `module.exports = ${JSON.stringify(config, null, 2)}` | ||
| ); |
There was a problem hiding this comment.
Config file overwrite causes data loss.
The code copies the entire template directory (line 42), which includes a complete help-center.config.js with navbar, footer, and other settings. Then it immediately overwrites this file (lines 53-56) with a minimal config containing only 5 fields, losing the navbar, footer, customCss, and customJs configurations from the template.
Apply this diff to merge user input with the template config:
// Copy template files
const templatePath = path.join(__dirname, '../templates/default');
fs.copySync(templatePath, projectPath);
- // Create config file
- const config = {
- title: answers.title,
- description: answers.description,
- theme: 'default',
- baseUrl: '/',
- favicon: 'img/favicon.ico'
- };
+ // Update config file with user input
+ const configPath = path.join(projectPath, 'help-center.config.js');
+ const templateConfig = require(configPath);
+ const config = {
+ ...templateConfig,
+ title: answers.title,
+ description: answers.description
+ };
fs.writeFileSync(
- path.join(projectPath, 'help-center.config.js'),
+ configPath,
`module.exports = ${JSON.stringify(config, null, 2)}`
);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const projectPath = path.join(process.cwd(), projectName); | |
| // Create project directory | |
| fs.mkdirSync(projectPath, { recursive: true }); | |
| // Copy template files | |
| const templatePath = path.join(__dirname, '../templates/default'); | |
| fs.copySync(templatePath, projectPath); | |
| // Create config file | |
| const config = { | |
| title: answers.title, | |
| description: answers.description, | |
| theme: 'default', | |
| baseUrl: '/', | |
| favicon: 'img/favicon.ico' | |
| }; | |
| fs.writeFileSync( | |
| path.join(projectPath, 'help-center.config.js'), | |
| `module.exports = ${JSON.stringify(config, null, 2)}` | |
| ); | |
| const projectPath = path.join(process.cwd(), projectName); | |
| // Create project directory | |
| fs.mkdirSync(projectPath, { recursive: true }); | |
| // Copy template files | |
| const templatePath = path.join(__dirname, '../templates/default'); | |
| fs.copySync(templatePath, projectPath); | |
| // Update config file with user input | |
| const configPath = path.join(projectPath, 'help-center.config.js'); | |
| const templateConfig = require(configPath); | |
| const config = { | |
| ...templateConfig, | |
| title: answers.title, | |
| description: answers.description | |
| }; | |
| fs.writeFileSync( | |
| configPath, | |
| `module.exports = ${JSON.stringify(config, null, 2)}` | |
| ); |
| // Install dependencies | ||
| console.log(chalk.yellow('Installing dependencies...')); | ||
| execSync('npm install', { cwd: projectPath, stdio: 'inherit' }); | ||
|
|
||
| console.log(chalk.green('\nSuccess! Created help center at ' + projectPath)); | ||
| console.log('\nInside that directory, you can run several commands:'); | ||
| console.log('\n npm start'); | ||
| console.log(' Starts the development server.'); | ||
| console.log('\n npm run build'); | ||
| console.log(' Builds the help center for production.'); | ||
| console.log('\n npm run deploy'); | ||
| console.log(' Deploys the help center to your specified domain.'); | ||
| }); |
There was a problem hiding this comment.
Add error handling for npm install.
The execSync call for npm install can fail (network issues, permission errors, etc.) but has no try-catch block. Users will see a cryptic stack trace instead of a helpful error message.
Apply this diff:
// Install dependencies
console.log(chalk.yellow('Installing dependencies...'));
- execSync('npm install', { cwd: projectPath, stdio: 'inherit' });
+ try {
+ execSync('npm install', { cwd: projectPath, stdio: 'inherit' });
+ } catch (error) {
+ console.error(chalk.red('\nFailed to install dependencies. Please run npm install manually.'));
+ process.exit(1);
+ }
console.log(chalk.green('\nSuccess! Created help center at ' + projectPath));📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // Install dependencies | |
| console.log(chalk.yellow('Installing dependencies...')); | |
| execSync('npm install', { cwd: projectPath, stdio: 'inherit' }); | |
| console.log(chalk.green('\nSuccess! Created help center at ' + projectPath)); | |
| console.log('\nInside that directory, you can run several commands:'); | |
| console.log('\n npm start'); | |
| console.log(' Starts the development server.'); | |
| console.log('\n npm run build'); | |
| console.log(' Builds the help center for production.'); | |
| console.log('\n npm run deploy'); | |
| console.log(' Deploys the help center to your specified domain.'); | |
| }); | |
| // Install dependencies | |
| console.log(chalk.yellow('Installing dependencies...')); | |
| try { | |
| execSync('npm install', { cwd: projectPath, stdio: 'inherit' }); | |
| } catch (error) { | |
| console.error(chalk.red('\nFailed to install dependencies. Please run npm install manually.')); | |
| process.exit(1); | |
| } | |
| console.log(chalk.green('\nSuccess! Created help center at ' + projectPath)); | |
| console.log('\nInside that directory, you can run several commands:'); | |
| console.log('\n npm start'); | |
| console.log(' Starts the development server.'); | |
| console.log('\n npm run build'); | |
| console.log(' Builds the help center for production.'); | |
| console.log('\n npm run deploy'); | |
| console.log(' Deploys the help center to your specified domain.'); | |
| }); |
🤖 Prompt for AI Agents
In bin/help-center.js around lines 58 to 70, the execSync('npm install', ...)
call is not wrapped in error handling; wrap the npm install call in a try/catch,
and on error log a clear, user-friendly message (use chalk.red) that includes
the error.message or error.stack, then exit the process with a non-zero code
(process.exit(1)). Ensure the success messages only run when install completes
without throwing.
| { id: 'quickstart', category: 'getting-started', title: 'Quickstart Guide', content: '<p>Welcome to the Quickstart Guide.</p>' }, | ||
| { id: 'authentication', category: 'getting-started', title: 'Authentication', content: '<p>Learn how to authenticate with the API.</p>' }, | ||
| { id: 'pricing', category: 'billing', title: 'Pricing', content: '<p>Understand our pricing plans.</p>' }, | ||
| { id: 'invoice-history', category: 'billing', title: 'Invoice History', content: '<p>View your past invoices.</p>' }, | ||
| { id: 'fine-tuning', category: 'guides', title: 'Fine-tuning Models', content: '<p>Step-by-step guide to fine-tuning.</p>' }, | ||
| { id: 'chat-completions', category: 'api-reference', title: 'Chat Completions API', content: '<p>Documentation for chat completions.</p>' } |
There was a problem hiding this comment.
🧩 Analysis chain
Verify that HTML content is safely rendered to prevent XSS vulnerabilities.
The content field contains raw HTML strings that will be rendered in the application. Ensure that these are rendered using a safe method that prevents XSS attacks (e.g., DOMPurify for sanitization, or React's dangerouslySetInnerHTML with proper sanitization).
Run the following script to check how this content is being rendered:
🏁 Script executed:
#!/bin/bash
# Description: Check how article content from data.js is rendered in page components
# Search for usage of the content field from articles
rg -nP --type=js -C5 'articles\s*\.\s*content|article\.content|dangerouslySetInnerHTML'Length of output: 667
---
🏁 Script executed:
```shell
#!/bin/bash
# Check for DOMPurify imports and usage in the project
rg -n 'DOMPurify|purify|sanitize' --type=js
Length of output: 0
🏁 Script executed:
#!/bin/bash
# Check all dangerouslySetInnerHTML usages in the project
rg -nP --type=js -B3 'dangerouslySetInnerHTML'Length of output: 417
🏁 Script executed:
#!/bin/bash
# Check if DOMPurify is in package.json or other dependency files
find . -name 'package.json' -o -name 'package-lock.json' -o -name 'yarn.lock' | head -5 | xargs grep -l 'dompurify\|DOMPurify' 2>/dev/null || echo "No DOMPurify found in dependencies"Length of output: 34
🏁 Script executed:
#!/bin/bash
# Check the immediate context around the dangerouslySetInnerHTML usage
cat pages/article/[articleId].jsLength of output: 912
🏁 Script executed:
#!/bin/bash
# Show the actual imports at the top of the ArticlePage file to see if sanitization is done
head -n 25 pages/article/[articleId].jsLength of output: 912
Sanitize HTML content to prevent XSS vulnerabilities before rendering.
The article.content from data.js is rendered unsanitized using dangerouslySetInnerHTML in pages/article/[articleId].js (line 21). No sanitization library (DOMPurify) is installed or imported, exposing the application to XSS attacks if content sources change or user input is introduced.
Install DOMPurify, import it, and sanitize the content before rendering:
import DOMPurify from 'dompurify';
// In the component:
<div className={styles.content} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(article.content) }} />🤖 Prompt for AI Agents
In pages/article/[articleId].js around line 21 (and referencing data.js entries
at data.js lines 9-14), the article.content is rendered with
dangerouslySetInnerHTML unsanitized; install DOMPurify as a dependency, import
DOMPurify at the top of the component file, and replace the direct use of
article.content with a sanitized string using
DOMPurify.sanitize(article.content) when passing __html to
dangerouslySetInnerHTML so the rendered HTML is cleaned before output.
| "next": "13.4.7", | ||
| "react": "18.2.0", | ||
| "react-dom": "18.2.0", |
There was a problem hiding this comment.
🧩 Analysis chain
Verify that Next.js and React versions are current and secure.
The package specifies Next.js 13.4.7 and React 18.2.0, which may not be the latest versions. Consider verifying whether these versions have known vulnerabilities and if newer stable versions are available.
Please search the web to verify the latest stable versions and any security advisories:
🌐 Web query:
What are the latest stable versions of Next.js 13.x and React 18.x, and are there any security vulnerabilities in Next.js 13.4.7 or React 18.2.0?
💡 Result:
Short answer:
- Latest stable in the 13.x Next.js line: 13.4.19. [1][2]
- Latest stable in the React 18.x line: 18.3.1. [3]
Security status:
-
Next.js 13.4.7: multiple published security issues affect the 13.4.x line (including an authorization-bypass / improper-authorization issue tracked as CVE-2025-29927 and other SSRF / DoS/ race-condition issues). 13.4.7 is listed among affected 13.4.x releases — you should upgrade to a patched release (or move off 13.x) per the Next.js advisories and security trackers. [4][5][6]
-
React 18.2.0: there are no widely‑published critical CVEs against core React 18.2.0 itself in the trackers I checked. (There are, however, high‑severity vulnerabilities recently disclosed in related React/React‑Native tooling — e.g., a critical RCE in the @react-native-community CLI / Metro tooling (CVE-2025-11953) that affects React Native developer environments, not the React core library.) If you run React Native or other React ecosystem tools, check those package advisories and update accordingly. [7][8][9]
Sources:
- npm package page for next (v13.4.19).
- Snyk / component advisories for next@13.4.x.
- React GitHub releases (18.3.1).
- Snyk advisory summary for next (lists improper-authorization, SSRF, DoS, etc.).
- GitHub security advisory / Next.js SSRF advisory.
- Cybersecurity vulnerability listing (CVE-2025-29927) showing 13.4.7 as affected.
- News / vendor advisories about CVE-2025-11953 (React Native CLI / Metro).
- NVD / news coverage for Next.js Image/content injection advisories.
- Snyk / React package vulnerability listing.
If you want, I can give the exact upgrade target versions and commands (npm / pnpm) to remediate for your project and CI.
Update Next.js and React to secure versions immediately.
Package.json specifies Next.js 13.4.7 and React 18.2.0. Verification found critical security vulnerabilities:
- Next.js 13.4.7 is affected by multiple published security issues in the 13.4.x line, including CVE-2025-29927 (authorization-bypass / improper-authorization), SSRF, DoS, and race-condition issues. Upgrade to at least 13.4.19.
- React 18.2.0 should be updated to 18.3.1 for stability and security patches.
🤖 Prompt for AI Agents
In package.json around lines 21 to 23, the pinned Next.js (13.4.7) and React
(18.2.0) versions are vulnerable; update "next" to at least "13.4.19" and update
both "react" and "react-dom" to "18.3.1". After changing the versions, run your
package manager (npm/yarn/pnpm) to update lockfiles, rebuild and run tests, and
scan for breaking-change notes in the Next.js/React release notes to address any
required code adjustments.
| export async function getStaticProps({ params }) { | ||
| const article = articles.find(a => a.id === params.articleId); | ||
| const category = categories.find(cat => cat.id === article.category); | ||
| return { props: { article, category } }; | ||
| } |
There was a problem hiding this comment.
Add null check to prevent runtime error.
If articles.find() returns undefined (when params.articleId doesn't match any article), accessing article.category on line 12 will throw a TypeError and cause the build to fail.
Apply this diff to add a null check:
export async function getStaticProps({ params }) {
const article = articles.find(a => a.id === params.articleId);
+ if (!article) {
+ return { notFound: true };
+ }
const category = categories.find(cat => cat.id === article.category);
return { props: { article, category } };
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export async function getStaticProps({ params }) { | |
| const article = articles.find(a => a.id === params.articleId); | |
| const category = categories.find(cat => cat.id === article.category); | |
| return { props: { article, category } }; | |
| } | |
| export async function getStaticProps({ params }) { | |
| const article = articles.find(a => a.id === params.articleId); | |
| if (!article) { | |
| return { notFound: true }; | |
| } | |
| const category = categories.find(cat => cat.id === article.category); | |
| return { props: { article, category } }; | |
| } |
🤖 Prompt for AI Agents
pages/article/[articleId].js around lines 10 to 14: the code assumes
articles.find(...) always returns an article and accesses article.category which
will throw if undefined; add a null check after finding the article and if it's
not found return { notFound: true } (or alternatively return props with article:
null and handle that in the page), otherwise safely derive category only when
article exists and return props; ensure you do not access article.category when
article is undefined.
| <div className={styles.container}> | ||
| <Link href={`/category/${category.id}`} className={styles.backLink}>← {category.title}</Link> | ||
| <h1 className={styles.title}>{article.title}</h1> | ||
| <div className={styles.content} dangerouslySetInnerHTML={{ __html: article.content }} /> |
There was a problem hiding this comment.
XSS risk with dangerouslySetInnerHTML.
Using dangerouslySetInnerHTML without sanitization exposes the application to cross-site scripting (XSS) attacks if article content contains malicious scripts. While the current data.js contains static HTML, this creates a security vulnerability for any future content sources.
Consider one of these solutions:
- Use a sanitization library (recommended):
+import DOMPurify from 'isomorphic-dompurify';
+
export default function ArticlePage({ article, category }) {
+ const sanitizedContent = DOMPurify.sanitize(article.content);
return (
<div className={styles.container}>
<Link href={`/category/${category.id}`} className={styles.backLink}>← {category.title}</Link>
<h1 className={styles.title}>{article.title}</h1>
- <div className={styles.content} dangerouslySetInnerHTML={{ __html: article.content }} />
+ <div className={styles.content} dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
</div>
);
}- Use Markdown rendering instead of raw HTML:
If content is authored in Markdown, parse and render it safely using a library like react-markdown instead of storing pre-rendered HTML.
Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 Biome (2.1.2)
[error] 21-21: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
🤖 Prompt for AI Agents
pages/article/[articleId].js around line 21: the component uses
dangerouslySetInnerHTML with article.content, creating an XSS risk; sanitize the
HTML before injecting or switch to rendering Markdown. Fix by either (a)
integrating a sanitization library (e.g., DOMPurify) and calling it on
article.content before passing it to dangerouslySetInnerHTML (ensure you
sanitize server- or client-side and export sanitizedContent to the component),
or (b) change the data format to Markdown and render with a safe renderer (e.g.,
react-markdown with rehype-sanitize) instead of using dangerouslySetInnerHTML.
Ensure imports and any async data flow are updated accordingly and remove direct
use of unsanitized article.content in dangerouslySetInnerHTML.
| export async function getStaticProps({ params }) { | ||
| const category = categories.find(cat => cat.id === params.categoryId); | ||
| const categoryArticles = articles.filter(article => article.category === category.id); | ||
| return { props: { category, articles: categoryArticles } }; | ||
| } |
There was a problem hiding this comment.
Add null check to prevent runtime error.
If categories.find() returns undefined (when params.categoryId doesn't match any category), accessing category.id on line 12 will throw a TypeError and cause the build to fail.
Apply this diff to add a null check:
export async function getStaticProps({ params }) {
const category = categories.find(cat => cat.id === params.categoryId);
+ if (!category) {
+ return { notFound: true };
+ }
const categoryArticles = articles.filter(article => article.category === category.id);
return { props: { category, articles: categoryArticles } };
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export async function getStaticProps({ params }) { | |
| const category = categories.find(cat => cat.id === params.categoryId); | |
| const categoryArticles = articles.filter(article => article.category === category.id); | |
| return { props: { category, articles: categoryArticles } }; | |
| } | |
| export async function getStaticProps({ params }) { | |
| const category = categories.find(cat => cat.id === params.categoryId); | |
| if (!category) { | |
| return { notFound: true }; | |
| } | |
| const categoryArticles = articles.filter(article => article.category === category.id); | |
| return { props: { category, articles: categoryArticles } }; | |
| } |
🤖 Prompt for AI Agents
In pages/category/[categoryId].js around lines 10 to 14, getStaticProps uses
categories.find(...) and then accesses category.id which will throw if no
category is found; add a null check immediately after finding the category and
if it's undefined return { notFound: true } (or alternatively return safe empty
props), otherwise proceed to filter articles and return props normally.
2 participants
Summary by CodeRabbit