nextjs-site

The current website for jenntesolin.com — built with Next.js and Tailwind CSS.

🚧 This site is actively being reworked — image references, layout polish, and metadata improvements are in progress.

---

📚 Table of Contents

• Requirements
• Version Information
• 🎨 Color Reference
• 🚀 Quick Start
  • 🧪 Lint the Code
• 🛠 Generate Sitemap, Feed, and Search Metadata
  • 🧾 Metadata Checklist for Pages and Blog Posts
• 📎 PrismJS Plugin CSS Handling (Next.js 15 + Tailwind 4)
• 🔐 Local Environment Variables
• 🗂️ Development Tasks
• 📄License
• 🤖 humans.txt
• 💎 Acknowledgments

Requirements

• Node.js: 22.16.0
• NPM: 10.9.2

Version Information

• Tailwind CSS: 4.x
• PostCSS: 8.x
• Next.js: 15.x
• PrismJS: 1.x
• React / React-DOM: 19.x
• ESLint: 9.x

🎨 Color Reference

This site uses Tailwind’s built-in palette. Key color usage:

Usage	Tailwind Class	Hex Code
Primary Nav BG	bg-indigo-500	#6366F1
Link Focus Ring	focus:ring-white	#FFFFFF
Warning BG	bg-yellow-200	#FEF3C7
Warning Text	text-yellow-600	#B45309
Card Border	border-gray-300	#D1D5DB
Footer Text	text-white	#FFFFFF

---

🚀 Quick Start

1. Clone the repo:

   git clone https://github.com/jennifert/nextjs-site.git
   cd nextjs-site

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Build and export for static hosting:

   npm run build
   npm run export

Output will be in the out/ directory, suitable for DigitalOcean or other static hosts.

🧪 Lint the Code

To check for code quality and accessibility issues:

npm run lint

This will run ESLint using your custom configuration and report any warnings or errors.

🛠 Generate Sitemap, Feed, and Search Metadata

⚠ These files are auto-generated. Do not edit meta.json, sitemap.xml, or feed.xml manually.

To automatically generate:

• public/meta.json for search and sitemap
• public/sitemap.xml for SEO
• public/feed.xml for RSS readers

Run the following command:

npm run generate-meta

Make sure all blog/page files are updated with correct POST_TITLE, POST_DESCRIPTION, and POST_TAGS constants. These are used to populate the metadata automatically.

🧾 Metadata Checklist for Pages and Blog Posts

Ensure each file in pages/ or pages/blog/ contains:

export const POST_TITLE = "My Page or Post Title";
export const POST_DESCRIPTION = "A short, clear description used in meta tags and search.";
export const POST_TAGS = ["tag1", "tag2"]; // Optional but recommended

These are used to generate:

File	Purpose
meta.json	Search index and sitemap
sitemap.xml	SEO
feed.xml	RSS title + excerpt
<title> tag	Browser tab, SEO, social
<meta name="description">	SEO & previews

⚠ If any fields are missing, the page may be skipped in meta.json or show default/fallback metadata.

📎 PrismJS Plugin CSS Handling (Next.js 15 + Tailwind 4)

Next.js 15 and Tailwind 4.1 introduce stricter PostCSS rules. PrismJS plugin styles (like toolbar or line numbers) can break if imported directly. Here's the fix:

✅ 1. Add a Custom Webpack Rule

In next.config.js, add this rule:

webpack: (config) => {
  config.module.rules.push({
    test: /\.prismcss$/,
    use: ['style-loader', 'css-loader'],
  });
  return config;
};

This isolates .prismcss imports from the PostCSS pipeline.

---

✅ 2. Import Prism Styles with ?prismcss Suffix

In _app.js or related components:

import 'prismjs/themes/prism-tomorrow.css?prismcss';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css?prismcss';
import 'prismjs/plugins/toolbar/prism-toolbar.css?prismcss';

This ensures only Prism styles are handled by the custom rule.

❌ Avoid Raw .css Imports

// 🚫 Incorrect:
import 'prismjs/plugins/toolbar/prism-toolbar.css';

This causes a build failure in Tailwind/PostCSS 8+ environments.

---

🔐 Local Environment Variables

This site currently does not require a .env file.

---

🧾 Headers and Caching (DigitalOcean App Platform)

To address aggressive or inconsistent caching behavior on deployed pages (especially with trailing slashes or refreshed routes), a _headers file is used in the out/ directory after export.

This ensures consistent behavior across static pages, especially when deployed to DigitalOcean's App Platform.

📂 Example: public/_headers

/*
  Cache-Control: no-cache, no-store, must-revalidate
  Pragma: no-cache
  Expires: 0

This disables aggressive page caching, ensuring fresh loads for all routes.

✅ No additional config is required in next.config.js for this.

The _headers file must be present in the output directory before deployment. It will be included during npm run export.

---

Development Tasks

🗂️ See TODO.md for the active task board and enhancements.

---

License

• 📄 Code is licensed under the MIT License
• 📝 Content (articles, posts, and media) is licensed under CC BY-NC-SA 4.0

---

🤖 humans.txt

For developer credits and site stack details, see /humans.txt

---

💎 Acknowledgments

This project would not be possible without these fantastic community resources:

• Shields.io — For README badges
• Awesome README — For formatting inspiration