Introduction
When building modern web applications with Next.js, you'll frequently need to transform user input into URL-friendly formats. Whether you're generating slugs for blog posts, creating clean file names, or building dynamic routes, replacing spaces with dashes is a fundamental operation that every web developer encounters.
The ability to convert text like "Hello World" into "hello-world" might seem straightforward at first glance, but production applications require careful consideration of Unicode characters, performance implications, and user experience. Modern web development demands solutions that work consistently across languages and browsers while maintaining the performance standards that Next.js applications are known for.
This guide explores multiple approaches to accomplish this task efficiently, from simple one-liners to production-ready implementations that handle edge cases gracefully. Understanding these techniques is essential for building robust SEO-friendly applications that generate clean, readable URLs automatically.
The Basic Replace Operation
At its core, replacing spaces with dashes in JavaScript relies on the String.replace() method combined with regular expressions. The most straightforward approach uses a simple regex pattern to find all space characters and replace them with dashes.
The critical difference between using replace() with and without the global flag determines whether all spaces get transformed or just the first one. Without the global flag, only the initial space character gets replaced, leaving subsequent spaces intact--a subtle bug that can produce unexpected results in your application.
const text = "Hello World from JavaScript";
const withGlobal = text.replace(/ /g, "-");
// Result: "Hello-World-from-JavaScript"
const withoutGlobal = text.replace(/ /, "-");
// Result: "Hello-World from JavaScript"
The g (global) flag in the regex ensures that all spaces in the string get replaced in a single operation. This is essential for URL slugs where you need consistent dash-separated segments regardless of how many spaces appear in the source text.
Handling All Whitespace Characters
For more comprehensive space handling, including tabs, newlines, and other Unicode whitespace characters, the \s metacharacter provides broader coverage. This pattern matches any whitespace character, making it more robust for applications that need to handle varied input types like user-generated content with formatting.
const text = " Multiple spaces and tabs
and newlines ";
const result = text.replace(/\s+/g, "-").replace(/^-+|-+$/g, "");
// Result: "Multiple-spaces-and-tabs-and-newlines"
The chaining approach first collapses all consecutive whitespace (whether spaces, tabs, or newlines) into single dashes, then trims any leading or trailing dashes that result from whitespace at the start or end of the input. This produces clean output suitable for URLs without any edge case artifacts.
For developers working with advanced JavaScript techniques, mastering these string manipulation patterns is fundamental to building reliable text transformation features.
Building a Complete Slugify Function
Production applications require more than just space replacement. A true slugify function must handle lowercase conversion, special character removal, and Unicode normalization to create truly URL-friendly strings. The implementation below demonstrates a comprehensive approach that addresses these requirements while maintaining the performance characteristics necessary for modern web applications.
function slugify(text) {
if (!text) return "";
return text
.toString()
.toLowerCase()
.normalize("NFD")
.trim()
.replace(/\s+/g, "-")
.replace(/[^\w\-]+/g, "")
.replace(/\-\-+/g, "-")
.replace(/^-+/, "")
.replace(/-+$/, "");
}
Understanding Each Transformation Step
Each operation in this chain serves a specific purpose that contributes to creating a reliable slug for your application.
The toString() call ensures the function can handle any input type by converting it first. This defensive programming prevents errors when the function receives numbers, dates, or other non-string types that might be passed accidentally or intentionally.
The toLowerCase() method ensures URL consistency regardless of input case. URLs are case-sensitive in technical implementations, so standardizing to lowercase prevents duplicate content issues and improves SEO by consolidating link equity to a single canonical URL.
The normalize("NFD") method performs Unicode normalization that decomposes combined characters into their base and combining parts. This is essential for international text--characters like "é" become "e" + combining accent mark, allowing subsequent steps to remove diacritical marks and produce readable slugs from any language.
The trim() operation removes leading and trailing whitespace before any transformation begins, preventing artifacts at the boundaries of your slug.
The replace(/\s+/g, "-") pattern converts all whitespace sequences to single dashes, handling tabs, newlines, and multiple spaces uniformly.
The replace(/[^\w\-]+/g, "") pattern removes any non-word characters except dashes, stripping punctuation and special symbols that would create invalid URLs.
The replace(/\-\-+/g, "-") pattern collapses consecutive dashes into single dashes, which can occur when original text contains multiple spaces or special characters between words.
The final trim operations remove any leading or trailing dashes that might result from the transformation, ensuring clean output that works reliably in all URL contexts.
Real-Time Text Input Handling
One common use case involves transforming user input as they type in a text field, such as when creating a URL slug input alongside a title field. This requires careful event handling to balance responsiveness with performance, ensuring the transformation doesn't introduce noticeable lag during typing.
const titleInput = document.getElementById("title");
const slugInput = document.getElementById("slug");
// Simple slugify function for inline use
function simpleSlugify(text) {
return text
.toString()
.toLowerCase()
.normalize("NFD")
.trim()
.replace(/\s+/g, "-")
.replace(/[^\w\-]+/g, "")
.replace(/\-\-+/g, "-")
.replace(/^-+/, "")
.replace(/-+$/, "");
}
titleInput.addEventListener("input", (event) => {
const slug = simpleSlugify(event.target.value);
slugInput.value = slug;
});
This vanilla JavaScript approach attaches an event listener to the input field and transforms the value in real-time. The input event fires on every change, including paste operations and drag-and-drop text, making it more comprehensive than change or keyup events.
React Hook Implementation
For React applications built with Next.js, the same pattern applies but uses state management to maintain reactivity. The implementation should consider debouncing to prevent excessive recomputations during rapid typing, which becomes particularly important for longer text inputs. This is particularly valuable when building automated workflows that process user content in real-time.
import { useState, useCallback } from "react";
function useSlugify(initialValue = "") {
const [value, setValue] = useState(initialValue);
const slugify = useCallback((text) => {
return text
.toString()
.toLowerCase()
.normalize("NFD")
.trim()
.replace(/\s+/g, "-")
.replace(/[^\w\-]+/g, "")
.replace(/\-\-+/g, "-")
.replace(/^-+/, "")
.replace(/-+$/, "");
}, []);
const setSlugifiedValue = useCallback((newValue) => {
setValue(slugify(newValue));
}, [slugify]);
return [value, setSlugifiedValue, slugify];
}
// Usage in a component:
function BlogPostForm() {
const [title, setTitle, slugifyTitle] = useSlugify();
const [slug, setSlug, slugify] = useSlugify();
return (
<div>
<input
type="text"
value={title}
onChange={(e) => {
setTitle(e.target.value);
setSlug(slugify(e.target.value));
}}
placeholder="Enter post title"
/>
<input
type="text"
value={slug}
onChange={(e) => setSlug(e.target.value)}
placeholder="URL slug will appear here"
/>
</div>
);
}
The useCallback optimization ensures the slugify function maintains referential equality across renders, preventing unnecessary re-renders in parent components. For production applications with heavy input, consider adding debouncing using a library like Lodash or a custom implementation to limit how often the transformation runs during rapid typing.
Library Options for Production Use
While custom implementations work well for many applications, established libraries offer additional features, broader language support, and battle-tested reliability. Understanding the trade-offs between library and custom solutions helps developers make informed decisions for their specific requirements.
Lodash kebabCase
Lodash's kebabCase function provides a familiar utility for teams already using the library in their projects. If your application already includes lodash as a dependency, this approach adds no additional bundle overhead while providing consistent, well-tested behavior.
import _ from "lodash";
const result = _.kebabCase("Hello World");
// Result: "hello-world"
_.kebabCase(" leading and trailing ");
// Result: "leading-and-trailing"
_.kebabCase("mixedCase String");
// Result: "mixed-case-string"
Voca Library
Voca offers a comprehensive string manipulation library with a dedicated slugify function that handles special characters and Unicode effectively. The library provides additional string utilities that may benefit applications requiring extensive text processing beyond simple slug generation.
import { slugify } from "voca";
const result = slugify("Hello World!");
// Result: "hello-world"
slugify("Café au Lait");
// Result: "cafe-au-lait"
slugify(" multiple spaces ");
// Result: "multiple-spaces"
@sindresorhus/slugify
This library stands out for its extensive language support and configurability. The library handles over 50 languages including German umlauts, Vietnamese, Arabic, and Russian characters, making it ideal for internationalized applications.
import slugify from "@sindresorhus/slugify";
slugify("I ♥ Dogs");
// Result: "i-love-dogs"
slugify(" Déjà Vu! ");
// Result: "deja-vu"
slugify("BAR and baz");
// Result: "bar-and-baz"
slugify("я люблю единорогов");
// Result: "ya-lyublyu-edinorogov"
slugify("Hällo Wörld");
// Result: "hallo-world"
The library supports custom separator characters, language-specific character mappings, and can be extended with additional rules for specialized applications. This makes it the preferred choice when your application serves a global audience with diverse linguistic requirements.
When to Use Libraries vs Custom Code
For most use cases, a custom implementation provides sufficient functionality with minimal overhead. The decision to use a library should be driven by specific requirements rather than convenience.
Choose custom implementation when: your application needs only basic slugification, bundle size is a primary concern, you want to avoid additional dependencies, or the default behavior matches your requirements exactly.
Choose a library when: you need extensive language support beyond ASCII and basic accented characters, the project already includes the library, you require configurability for different use cases, or maintenance of the slugify logic should be delegated to a dedicated library maintainer.
For applications where bundle size is a concern, the custom implementation adds minimal overhead while providing sufficient functionality. Libraries become more valuable when requirements include extensive language support or when the project already includes them as dependencies.
Performance Considerations
String manipulation operations, while generally fast in modern JavaScript engines, can become bottlenecks when performed repeatedly on large inputs or in tight loops. Understanding the performance characteristics of different approaches helps developers optimize their applications effectively.
The chained replace operations in a complete slugify function create intermediate string objects at each step, which can impact memory usage for very long inputs. Each replace() call produces a new string object, meaning a 10-step chain creates 10 intermediate strings before reaching the final result. For most typical use cases--titles, descriptions, short paragraphs--this overhead remains negligible given modern JavaScript engine optimizations.
Using regex with the global flag (/g) ensures all matches get replaced in a single pass, which is significantly more efficient than multiple separate replace calls. The pattern complexity also affects matching speed; simpler patterns like / /g execute faster than complex patterns involving character classes and quantifiers. Testing with your specific input patterns helps identify whether pattern optimization would yield meaningful improvements.
For applications processing large amounts of text, such as batch importing content with thousands of entries, consider using web workers to offload the transformation to a background thread. This prevents blocking the main thread and keeps the user interface responsive during intensive operations.
Optimization Techniques
For applications requiring maximum performance, memoization can cache results for identical inputs, eliminating redundant computation. This approach works particularly well when the same text might be slugified multiple times, such as when displaying the same content in multiple locations or during search indexing.
const slugifyMemoized = (() => {
const cache = new Map();
return (text) => {
if (cache.has(text)) {
return cache.get(text);
}
const result = text
.toString()
.toLowerCase()
.normalize("NFD")
.trim()
.replace(/\s+/g, "-")
.replace(/[^\w\-]+/g, "")
.replace(/\-\-+/g, "-")
.replace(/^-+/, "")
.replace(/-+$/, "");
cache.set(text, result);
return result;
};
})();
For real-time input scenarios, debouncing limits how often the slugify function runs during rapid typing. A typical debounce delay of 150-300ms balances responsiveness with performance, reducing computation while maintaining a smooth user experience.
function debounce(fn, delay) {
let timeoutId;
return (...args) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => fn(...args), delay);
};
}
const debouncedSlugify = debounce((input) => {
slugInput.value = slugify(input);
}, 200);
titleInput.addEventListener("input", (e) => debouncedSlugify(e.target.value));
For very long inputs where only the beginning portion affects the slug, consider lazy evaluation techniques that limit processing to the relevant portion. This applies primarily to edge cases where content management systems might pass entire article bodies to a slugify function when only the title should be used.
Best Practices Summary
Building reliable text transformation functionality requires attention to several key areas that contribute to production-ready code. Following these practices ensures your implementation handles real-world scenarios gracefully.
Key Considerations
Input validation ensures the function handles unexpected types gracefully. The function should return an empty string for null, undefined, or non-string inputs rather than throwing an error. This defensive approach prevents crashes from propagating through your application when unexpected data reaches the slugify function.
Deterministic behavior means the transformation pipeline produces the same output for the same input regardless of when or how many times it runs. This consistency is essential for caching, testing, and user expectations--users expect identical input to always produce identical slugs.
Comprehensive test coverage should include basic ASCII text, Unicode characters with diacritics, strings with multiple consecutive spaces, inputs starting or ending with spaces, empty inputs, special characters that should be removed, and edge cases like strings containing only spaces or special characters.
Clear documentation helps future maintainers understand the function's behavior and limitations. Document supported input types, return format, any known limitations, and the transformation steps performed. This reduces the learning curve for developers new to the codebase and prevents misuse.
Decision Framework
Custom implementations offer maximum control and minimal bundle size, while libraries provide broader language support and reduced maintenance burden. Most applications benefit from starting with a custom implementation and switching to a library only when specific requirements demand it.
Start with the custom slugify function outlined in this guide for applications serving primarily English-language content or languages using Latin-based scripts with standard diacritics. Switch to a library like @sindresorhus/slugify when your application requires proper handling of non-Latin scripts, when you need comprehensive language support for German umlauts, Vietnamese tones, Cyrillic, Arabic, or other writing systems, or when the project already includes the library as a dependency and bundle size concerns are mitigated.
For Next.js applications, consider integrating the slugify logic into utility modules that can be imported wherever needed, and implement it in React hooks for components that transform user input in real-time. This approach keeps your code DRY while maintaining clear separation between presentation and business logic. Our web development team can help you implement these patterns effectively in your projects.