Programming

Programming

Exploring Various Coding Languages

Programming LanguagesSoftware DevelopmentAlgorithms and Data StructuresSoftware EngineeringWeb and Mobile Programming

Articles in this Section

Configuring CI Build Caching for Next.js – Speeding Up Builds with .next/cache

Next.js stores build cache in .next/cache to improve performance and reduce build time. To benefit from this in CI environments, your workflow must persist this cache between builds. This article walks through caching setup for popular CI providers including GitHub Actions, GitLab, Jenkins, Vercel, and more.

/article/nextjs-ci-build-cache-configuration-performance

Setting a Content Security Policy (CSP) in Next.js – Nonces, Proxy Headers, and Dynamic Rendering

Content Security Policy (CSP) protects your Next.js application from XSS, clickjacking, and injection attacks. This article explains how to configure CSP headers using Proxy, generate nonces for inline script safety, and enforce dynamic rendering to support nonce-based security.

/article/nextjs-content-security-policy-csp-nonce-dynamic-rendering

Configuring CSP Without Nonces in Next.js – Using Subresource Integrity and Secure Static Rendering

If your application doesn’t require nonces, you can configure Content Security Policy (CSP) directly in next.config.js.. Next.js also supports experimental Subresource Integrity (SRI), allowing strict CSP enforcement while preserving static rendering and CDN caching. This article explains how to set CSP headers, enable SRI, handle development vs production differences, and safely integrate third-party scripts.

/article/nextjs-csp-without-nonce-subresource-integrity-static-security

Using CSS-in-JS in Next.js – Style Registries, Streaming Support, and Concurrent Rendering

CSS-in-JS libraries allow you to define styles directly inside your React components. In Next.js, using these libraries with Server Components and streaming requires support for React 18’s concurrent rendering. This article explains how to configure styled-jsx and styled-components using style registries and the useServerInsertedHTML hook.

/article/css-in-js-nextjs-style-registry-server-components-streaming

Setting Up a Custom Server in Next.js – Request Handling, Routing Control, and Performance Considerations

Next.js includes a built-in server that runs with next start. In rare cases, you may need a custom server to handle advanced routing or request logic. This article explains how to build a custom server using Node.js, configure your scripts, and understand the performance trade-offs and limitations of standalone mode.

/article/nextjs-custom-server-routing-http-performance

Thinking About Data Security in Next.js – Access Layers, Server Components, and Preventing Data Leakage

React Server Components in Next.js improve performance but shift how and where data is accessed. This article explores three recommended data-fetching strategies, how to design a secure Data Access Layer (DAL), how to prevent sensitive data from leaking to the client, and how to use protective tools like taint and server-only modules.

/article/nextjs-data-security-access-layer-server-components-leak-prevention

Mutating Data Securely in Next.js – Server Actions, Input Validation, and CSRF Protection

Next.js uses Server Actions to handle data mutations like form submissions, database updates, and user logout. This article explains how Server Actions work, their built-in security features, how to validate client input, manage encryption keys, prevent CSRF attacks, and avoid side effects during rendering. It also includes auditing tips for secure Next.js applications.

/article/nextjs-mutation-server-actions-security-validation-csrf

Using Debugging Tools with Next.js – Full Stack Inspection with VS Code, DevTools, and Server Flags

Next.js supports full-stack debugging using tools like VS Code, Chrome DevTools, Firefox DevTools, and WebStorm. This article explains how to configure launch settings, inspect client and server code, use the --inspect flag, and debug across platforms with source maps and browser extensions.

/article/nextjs-debugging-tools-vscode-devtools-inspect-server-client

Previewing Content with Draft Mode in Next.js – Secure Previews from Your Headless CMS

Draft Mode in Next.js allows you to preview unpublished content from your headless CMS without rebuilding your site. This article walks through enabling Draft Mode, securing access with a secret token, validating slugs, and dynamically rendering draft content on request.

/article/nextjs-draft-mode-preview-headless-cms

Using Environment Variables in Next.js – Secure Loading, Browser Access, and Runtime Configuration

Next.js has built-in support for environment variables. This article explains how to load variables from .env files, expose them to the browser using NEXT_PUBLIC_, access them at runtime, configure them for testing, and understand the load order across environments.

/article/nextjs-environment-variables-loading-browser-runtime-test

Creating Forms with Server Actions in Next.js – Validation, Secure Submission, and Optimistic UI Updates

Server Actions in Next.js allow you to handle form submissions directly on the server without needing separate API routes. This article walks through how to define forms, extract FormData, validate inputs with zod, manage submission states, and implement optimistic UI updates.

/article/nextjs-forms-server-actions-validation-submission-optimistic-ui

Implementing ISR in Next.js – Time-Based and On-Demand Static Page Regeneration

Incremental Static Regeneration (ISR) in Next.js allows you to update static pages without rebuilding the entire site. This article explains how to configure time-based revalidation, use revalidatePath and revalidateTag for on-demand updates, manage cache behavior, and troubleshoot ISR in production.

/article/nextjs-isr-static-regeneration-revalidate-path-tag-cache
Programming | Dr. Shahin Siami