tknuth/QR-master
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Paar fehler

Browse Source
This commit is contained in:
knuthtimo-lab
2026-01-22 20:09:54 +01:00
parent e44dc1c6bb
commit 59131a54f0
26 changed files with 1609 additions and 1544 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/(app)/layout.tsx
View File

@@ -17,22 +17,16 @@ export const metadata: Metadata = {
},
};
export default function RootAppLayout({
export default function AppGroupLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className="font-sans">
<Providers>
<Suspense fallback={null}>
<AppLayout>
{children}
</AppLayout>
</Suspense>
</Providers>
</body>
</html>
<Suspense fallback={null}>
<AppLayout>
{children}
</AppLayout>
</Suspense>
);
}

34
src/app/(marketing)/layout.tsx
View File

@@ -47,30 +47,24 @@ export const metadata: Metadata = {
},
};
export default function RootMarketingLayout({
export default function MarketingGroupLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<head>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationSchema()) }}
/>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(websiteSchema()) }}
/>
</head>
<body className="font-sans">
<Providers>
<MarketingLayout>
{children}
</MarketingLayout>
</Providers>
</body>
</html>
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationSchema()) }}
/>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(websiteSchema()) }}
/>
<MarketingLayout>
{children}
</MarketingLayout>
</>
);
}

24
src/app/(marketing)/tools/barcode-generator/BarcodeGeneratorClient.tsx
View File

@@ -10,6 +10,7 @@ import { Select } from '@/components/ui/Select';
import { showToast } from '@/components/ui/Toast';
import { cn } from '@/lib/utils';
import { toPng, toSvg, toBlob } from 'html-to-image';
import { trackEvent } from '@/components/PostHogProvider';
// Brand Colors
const BRAND = {
@@ -70,7 +71,19 @@ export default function BarcodeGeneratorClient() {
} else if ((format === 'ITF14' || format === 'MSI') && !/^\d+$/.test(value)) {
setError('This format only supports numbers.');
}
}, [value, format]);
if (value && !error) {
trackEvent('barcode_generated', {
format: format,
content_length: value.length,
width: width,
height: height,
display_value: displayValue,
line_color: lineColor,
frame_type: frameType
});
}
}, [value, format, width, height, displayValue, lineColor, frameType, error]);
const downloadBarcode = async (extension: 'png' | 'svg') => {
if (!barcodeRef.current) return;
@@ -96,6 +109,11 @@ export default function BarcodeGeneratorClient() {
document.body.removeChild(link);
showToast(`Barcode downloaded as ${extension.toUpperCase()}`, 'success');
trackEvent('barcode_downloaded', {
format: format,
extension: extension,
frame_type: frameType
});
} catch (err) {
console.error('Download failed', err);
showToast('Download failed', 'error');
@@ -121,6 +139,10 @@ export default function BarcodeGeneratorClient() {
}),
]);
showToast('Barcode copied to clipboard', 'success');
trackEvent('barcode_copied', {
format: format,
frame_type: frameType
});
} catch (err) {
console.error('Copy failed', err);
showToast('Failed to copy barcode', 'error');

642
src/app/(marketing)/tools/barcode-generator/BarcodeGuide.tsx
View File

@@ -1,321 +1,321 @@
import { BookOpen, CheckCircle, HelpCircle, Layers, Settings, ShoppingCart, Tag, Activity, Factory } from 'lucide-react';
import Link from 'next/link';
export function BarcodeGuide() {
return (
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white" id="guide">
<div className="max-w-3xl mx-auto prose prose-slate prose-lg">
<div className="flex items-center gap-3 mb-8 not-prose">
<div className="p-3 bg-blue-100/50 rounded-xl">
<BookOpen className="w-8 h-8 text-blue-600" />
</div>
<h2 className="text-3xl font-bold text-slate-900 m-0">
Barcode Generator – How Barcodes Work and Why They Matter
</h2>
</div>
<p className="lead text-xl text-slate-600">
Barcodes are an essential part of modern commerce, logistics, and inventory management. A <strong>Barcode Generator</strong> allows businesses and individuals to create scannable barcodes quickly and efficiently for products, packaging, and internal systems. Whether you run an online shop, manage a warehouse, or sell products locally, understanding how barcodes work can save time and reduce errors.
</p>
<p>
In this article, you will learn what barcodes are, how they work, and how a <strong>Barcode Generator</strong> helps you create professional barcodes in seconds.
</p>
{/* SEO Image */}
<div className="my-8 rounded-2xl overflow-hidden shadow-lg not-prose border border-slate-100">
<img
src="/barcode-generator-preview.png"
alt="Free Online Barcode Generator Preview - Create EAN, UPC, and Code 128 Barcodes"
className="w-full h-64 sm:h-80 object-cover"
width="800"
height="320"
/>
<div className="bg-slate-50 p-4 text-sm text-slate-500 text-center border-t border-slate-100">
Use our <strong>free barcode generator</strong> to create scannable codes.
</div>
</div>
<h2>What Is a Barcode?</h2>
<p>
A barcode is a visual representation of data that can be read by machines. It consists of vertical lines with different widths and spacing, which encode numbers or characters. When scanned with a barcode scanner or smartphone, the information is instantly translated into readable data.
</p>
<p>
Barcodes are commonly used to identify products, track inventory, manage logistics, and speed up checkout processes. They reduce manual input and significantly lower the risk of human error.
</p>
<h2>How Does a Barcode Generator Work?</h2>
<p>
A Barcode Generator converts text or numeric input into a barcode format that scanners can read. The process is simple:
</p>
<ul className="list-none pl-0 space-y-4 not-prose my-8">
<li className="flex gap-4">
<div className="w-8 h-8 mt-1 rounded-full bg-slate-100 flex items-center justify-center shrink-0 text-slate-600 font-bold text-sm">1</div>
<div>
<strong className="text-slate-900 block mb-1">Input Data</strong>
<p className="text-slate-600 m-0 text-base">You enter a number or text (for example, a product ID).</p>
</div>
</li>
<li className="flex gap-4">
<div className="w-8 h-8 mt-1 rounded-full bg-slate-100 flex items-center justify-center shrink-0 text-slate-600 font-bold text-sm">2</div>
<div>
<strong className="text-slate-900 block mb-1">Select Format</strong>
<p className="text-slate-600 m-0 text-base">You select a barcode format such as EAN-13 or Code 128.</p>
</div>
</li>
<li className="flex gap-4">
<div className="w-8 h-8 mt-1 rounded-full bg-slate-100 flex items-center justify-center shrink-0 text-slate-600 font-bold text-sm">3</div>
<div>
<strong className="text-slate-900 block mb-1">Generate</strong>
<p className="text-slate-600 m-0 text-base">The generator creates a scannable barcode image instantly.</p>
</div>
</li>
<li className="flex gap-4">
<div className="w-8 h-8 mt-1 rounded-full bg-slate-100 flex items-center justify-center shrink-0 text-slate-600 font-bold text-sm">4</div>
<div>
<strong className="text-slate-900 block mb-1">Download</strong>
<p className="text-slate-600 m-0 text-base">You download or print the barcode for use.</p>
</div>
</li>
</ul>
<p>
A modern <strong>Barcode Generator</strong> works directly in the browser and does not require additional software.
</p>
<h2>Common Types of Barcodes</h2>
<p>
Different barcode formats are used for different purposes. Choosing the right one is important for compatibility and scanning accuracy.
</p>
<div className="grid md:grid-cols-2 gap-6 not-prose my-8">
{/* EAN-13 Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<Tag className="w-5 h-5 text-blue-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">EAN-13</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Retail • Europe</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="EAN-13 Barcode Sample for International Products" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
EAN-13 is widely used in retail, especially in Europe. It is designed for consumer products sold in stores and supermarkets.
</p>
</div>
{/* UPC-A Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<ShoppingCart className="w-5 h-5 text-indigo-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">UPC-A</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Retail • USA/Canada</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="UPC-A Barcode Example for Retail Products in USA" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
UPC-A is similar to EAN-13 but is mainly used in the United States and Canada for retail products.
</p>
</div>
{/* Code 128 Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<Settings className="w-5 h-5 text-emerald-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">Code 128</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Logistics • Universal</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="Code 128 Barcode for Inventory and Shipping Labels" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
Code 128 is a flexible barcode format that supports letters and numbers. It is commonly used in logistics, shipping, and internal tracking systems.
</p>
</div>
{/* Code 39 Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<Factory className="w-5 h-5 text-orange-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">Code 39</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Industrial • Military</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="Code 39 Barcode for Industrial Use" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
The first alphanumeric barcode, Code 39 is still widely used in automotive and defense industries. It supports numbers and uppercase letters.
</p>
</div>
{/* MSI Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<Layers className="w-5 h-5 text-purple-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">MSI</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Inventory • Shelves</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="MSI Barcode for Inventory Management" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
MSI (Modified Plessey) is often used for inventory control in retail environments, such as labeling shelves in supermarkets and warehouses.
</p>
</div>
{/* Pharmacode Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<Activity className="w-5 h-5 text-red-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">Pharmacode</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Pharma • Packaging</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="Pharmacode for Pharmaceutical Packaging" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
Pharmacode is a specialized barcode standard used in the pharmaceutical industry for packaging control to prevent medication errors.
</p>
</div>
</div>
<h2>Why Use a Barcode Generator?</h2>
<p>Using a Barcode Generator offers several advantages:</p>
<div className="not-prose grid gap-4 mb-8">
<div className="flex gap-4 items-start">
<CheckCircle className="w-5 h-5 text-green-500 mt-1 shrink-0" />
<div>
<h5 className="font-bold text-slate-900 m-0">Speed</h5>
<p className="text-slate-600 text-sm m-0">Create barcodes instantly without technical knowledge.</p>
</div>
</div>
<div className="flex gap-4 items-start">
<CheckCircle className="w-5 h-5 text-green-500 mt-1 shrink-0" />
<div>
<h5 className="font-bold text-slate-900 m-0">Accuracy</h5>
<p className="text-slate-600 text-sm m-0">Reduce manual data entry errors.</p>
</div>
</div>
<div className="flex gap-4 items-start">
<CheckCircle className="w-5 h-5 text-green-500 mt-1 shrink-0" />
<div>
<h5 className="font-bold text-slate-900 m-0">Flexibility</h5>
<p className="text-slate-600 text-sm m-0">Generate barcodes for different formats and use cases.</p>
</div>
</div>
<div className="flex gap-4 items-start">
<CheckCircle className="w-5 h-5 text-green-500 mt-1 shrink-0" />
<div>
<h5 className="font-bold text-slate-900 m-0">Cost-effective</h5>
<p className="text-slate-600 text-sm m-0">No need for expensive software or hardware.</p>
</div>
</div>
</div>
<p>
For small businesses, online shops, and startups, a <strong>free Barcode Generator</strong> is often the easiest way to get started.
</p>
<h2>Barcode vs QR Code</h2>
<p>
Although barcodes and QR codes are often confused, they serve different purposes. A barcode stores data horizontally and is mainly used for product identification. A <Link href="/tools/url-qr-code" className="text-blue-600 hover:underline">QR code</Link> stores data both horizontally and vertically and can contain more complex information such as URLs or <Link href="/tools/vcard-qr-code" className="text-blue-600 hover:underline">contact details</Link>.
</p>
<p>
If you only need to identify products or inventory items, a classic barcode is usually the better choice.
</p>
<h2>Are Barcodes Free to Use?</h2>
<p>
The barcode image itself can be generated for free using a Barcode Generator. However, for retail products sold internationally, the barcode number may need to be officially registered through organizations such as GS1. This ensures that the barcode is unique and recognized globally.
</p>
<p>
For internal use, testing, or small projects, free barcode generation is usually sufficient.
</p>
<h2>Use Cases for Barcodes</h2>
<p>Barcodes are used in many industries, including:</p>
<ul className="list-disc pl-6 space-y-2 mb-8">
<li>Retail and e-commerce</li>
<li>Inventory and warehouse management</li>
<li>Shipping and logistics</li>
<li>Libraries and document tracking</li>
<li>Event tickets and labeling</li>
</ul>
<p>
A reliable <strong>Barcode Generator</strong> helps streamline these processes and improves efficiency.
</p>
<h2>Understanding Check Digits</h2>
<p>
Most barcodes (like EAN and UPC) include a "Check Digit"—the last number in the sequence. This digit is calculated mathematically from the other numbers to ensure the barcode is scanned correctly. Even if a barcode is slightly damaged or scratched, the scanner uses the check digit to verify the integrity of the data.
</p>
<h2>Best Practices for Printing Barcodes</h2>
<p>
To ensure your barcodes scan instantly at the checkout or in the warehouse, follow these printing tips:
</p>
<ul className="list-disc pl-6 space-y-2 mb-8">
<li><strong>High Contrast:</strong> Always print black bars on a white background. Reverse colors (white bars on black) often fail to scan.</li>
<li><strong>Quiet Zone:</strong> Leave enough white space (margins) on the left and right sides of the barcode.</li>
<li><strong>Resolution:</strong> For professional labels, use <strong>SVG format</strong> (vector) or high-resolution PNGs (at least 300 DPI) to avoid blurry edges.</li>
<li><strong>Size:</strong> Do not scale the barcode too small. Standard EAN-13 codes should be at least 30mm wide for reliable scanning.</li>
</ul>
<hr className="my-12 border-slate-200" />
<div className="flex items-center gap-3 mb-6 not-prose">
<HelpCircle className="w-6 h-6 text-blue-500" />
<h2 className="text-2xl font-bold text-slate-900 m-0">Frequently Asked Questions (FAQ)</h2>
</div>
<div className="not-prose space-y-8">
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ What is a Barcode Generator?</h5>
<p className="text-slate-600">A Barcode Generator is an online tool that converts numbers or text into scannable barcode images that can be used for products, labels, and inventory systems.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ Is this barcode generator free to use?</h5>
<p className="text-slate-600">Yes, our online barcode generator is completely free to use with no hidden costs or sign-ups required. You can generate, download, and print barcodes instantly.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ Which barcode format should I use?</h5>
<p className="text-slate-600">
<strong>EAN-13:</strong> Standard for retail products in Europe and globally.<br />
<strong>UPC-A:</strong> Standard for retail products in USA/Canada.<br />
<strong>Code 128:</strong> Best for logistics, shipping, and internal tracking (supports letters & numbers).
</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ Can I download barcodes in vector format (SVG)?</h5>
<p className="text-slate-600">Yes! We offer <strong>SVG downloads</strong>. SVG files are vector-based, meaning they can be scaled to any size without losing quality—perfect for professional product packaging.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ How do I generate a barcode online?</h5>
<p className="text-slate-600">To generate a barcode online, enter your product number or text, select the desired barcode format (such as EAN-13 or Code 128), and click the generate button. The barcode will be created instantly.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ Are generated barcodes scannable?</h5>
<p className="text-slate-600">Yes, barcodes generated with a proper barcode generator are fully scannable. We generate standard-compliant barcodes readable by any standard optical or laser barcode scanner.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ Can I use these barcodes for Amazon (EAN/UPC)?</h5>
<p className="text-slate-600">You can generate the <em>image</em> for Amazon here if you already have your EAN/UPC number. However, you cannot "create" a valid global EAN number here—you must purchase those official numbers from GS1 to sell on major platforms like Amazon.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ What is the difference between a barcode and a QR code?</h5>
<p className="text-slate-600">A barcode stores data horizontally (1D) and is mainly used for product IDs. A QR code stores data in 2D (matrix) and can hold much more information, such as URLs, vCards, or WiFi credentials.</p>
</div>
</div>
<div className="mt-12 p-6 bg-slate-900 rounded-xl text-white not-prose">
<h4 className="text-lg font-bold mb-2">Final Thoughts</h4>
<p className="text-slate-300 m-0">
A Barcode Generator is a simple yet powerful tool that helps businesses save time, reduce errors, and improve operational efficiency. By choosing the right barcode format and using a reliable generator, you can create professional barcodes that work across different systems and industries.
</p>
</div>
</div>
</section>
);
}
import { BookOpen, CheckCircle, HelpCircle, Layers, Settings, ShoppingCart, Tag, Activity, Factory } from 'lucide-react';
import Link from 'next/link';
export function BarcodeGuide() {
return (
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white" id="guide">
<div className="max-w-3xl mx-auto prose prose-slate prose-lg">
<div className="flex items-center gap-3 mb-8 not-prose">
<div className="p-3 bg-blue-100/50 rounded-xl">
<BookOpen className="w-8 h-8 text-blue-600" />
</div>
<h2 className="text-3xl font-bold text-slate-900 m-0">
Barcode Generator – How Barcodes Work and Why They Matter
</h2>
</div>
<p className="lead text-xl text-slate-600">
Barcodes are an essential part of modern commerce, logistics, and inventory management. A <strong>Barcode Generator</strong> allows businesses and individuals to create scannable barcodes quickly and efficiently for products, packaging, and internal systems. Whether you run an online shop, manage a warehouse, or sell products locally, understanding how barcodes work can save time and reduce errors.
</p>
<p>
In this article, you will learn what barcodes are, how they work, and how a <strong>Barcode Generator</strong> helps you create professional barcodes in seconds.
</p>
{/* SEO Image */}
<div className="my-8 rounded-2xl overflow-hidden shadow-lg not-prose border border-slate-100">
<img
src="/barcode-generator-preview.png"
alt="Free Online Barcode Generator Preview - Create EAN, UPC, and Code 128 Barcodes"
className="w-full h-64 sm:h-80 object-cover"
width="800"
height="320"
/>
<div className="bg-slate-50 p-4 text-sm text-slate-500 text-center border-t border-slate-100">
Use our <strong>free barcode generator</strong> to create scannable codes.
</div>
</div>
<h2>What Is a Barcode?</h2>
<p>
A barcode is a visual representation of data that can be read by machines. It consists of vertical lines with different widths and spacing, which encode numbers or characters. When scanned with a barcode scanner or smartphone, the information is instantly translated into readable data.
</p>
<p>
Barcodes are commonly used to identify products, track inventory, manage logistics, and speed up checkout processes. They reduce manual input and significantly lower the risk of human error.
</p>
<h2>How Does a Barcode Generator Work?</h2>
<p>
A Barcode Generator converts text or numeric input into a barcode format that scanners can read. The process is simple:
</p>
<ul className="list-none pl-0 space-y-4 not-prose my-8">
<li className="flex gap-4">
<div className="w-8 h-8 mt-1 rounded-full bg-slate-100 flex items-center justify-center shrink-0 text-slate-600 font-bold text-sm">1</div>
<div>
<strong className="text-slate-900 block mb-1">Input Data</strong>
<p className="text-slate-600 m-0 text-base">You enter a number or text (for example, a product ID).</p>
</div>
</li>
<li className="flex gap-4">
<div className="w-8 h-8 mt-1 rounded-full bg-slate-100 flex items-center justify-center shrink-0 text-slate-600 font-bold text-sm">2</div>
<div>
<strong className="text-slate-900 block mb-1">Select Format</strong>
<p className="text-slate-600 m-0 text-base">You select a barcode format such as EAN-13 or Code 128.</p>
</div>
</li>
<li className="flex gap-4">
<div className="w-8 h-8 mt-1 rounded-full bg-slate-100 flex items-center justify-center shrink-0 text-slate-600 font-bold text-sm">3</div>
<div>
<strong className="text-slate-900 block mb-1">Generate</strong>
<p className="text-slate-600 m-0 text-base">The generator creates a scannable barcode image instantly.</p>
</div>
</li>
<li className="flex gap-4">
<div className="w-8 h-8 mt-1 rounded-full bg-slate-100 flex items-center justify-center shrink-0 text-slate-600 font-bold text-sm">4</div>
<div>
<strong className="text-slate-900 block mb-1">Download</strong>
<p className="text-slate-600 m-0 text-base">You download or print the barcode for use.</p>
</div>
</li>
</ul>
<p>
A modern <strong>Barcode Generator</strong> works directly in the browser and does not require additional software.
</p>
<h2>Common Types of Barcodes</h2>
<p>
Different barcode formats are used for different purposes. Choosing the right one is important for compatibility and scanning accuracy.
</p>
<div className="grid md:grid-cols-2 gap-6 not-prose my-8">
{/* EAN-13 Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<Tag className="w-5 h-5 text-blue-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">EAN-13</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Retail • Europe</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="EAN-13 Barcode Sample for International Products" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
EAN-13 is widely used in retail, especially in Europe. It is designed for consumer products sold in stores and supermarkets.
</p>
</div>
{/* UPC-A Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<ShoppingCart className="w-5 h-5 text-indigo-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">UPC-A</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Retail • USA/Canada</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="UPC-A Barcode Example for Retail Products in USA" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
UPC-A is similar to EAN-13 but is mainly used in the United States and Canada for retail products.
</p>
</div>
{/* Code 128 Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<Settings className="w-5 h-5 text-emerald-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">Code 128</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Logistics • Universal</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="Code 128 Barcode for Inventory and Shipping Labels" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
Code 128 is a flexible barcode format that supports letters and numbers. It is commonly used in logistics, shipping, and internal tracking systems.
</p>
</div>
{/* Code 39 Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<Factory className="w-5 h-5 text-orange-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">Code 39</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Industrial • Military</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="Code 39 Barcode for Industrial Use" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
The first alphanumeric barcode, Code 39 is still widely used in automotive and defense industries. It supports numbers and uppercase letters.
</p>
</div>
{/* MSI Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<Layers className="w-5 h-5 text-purple-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">MSI</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Inventory • Shelves</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="MSI Barcode for Inventory Management" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
MSI (Modified Plessey) is often used for inventory control in retail environments, such as labeling shelves in supermarkets and warehouses.
</p>
</div>
{/* Pharmacode Card */}
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
<div className="flex items-center gap-3 mb-3">
<Activity className="w-5 h-5 text-red-500" />
<h4 className="text-lg font-bold text-slate-900 m-0">Pharmacode</h4>
</div>
<div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Pharma • Packaging</div>
<div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
<img src="/barcode-generator-preview.png" alt="Pharmacode for Pharmaceutical Packaging" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
</div>
<p className="text-sm text-slate-600 m-0">
Pharmacode is a specialized barcode standard used in the pharmaceutical industry for packaging control to prevent medication errors.
</p>
</div>
</div>
<h2>Why Use a Barcode Generator?</h2>
<p>Using a Barcode Generator offers several advantages:</p>
<div className="not-prose grid gap-4 mb-8">
<div className="flex gap-4 items-start">
<CheckCircle className="w-5 h-5 text-green-500 mt-1 shrink-0" />
<div>
<h5 className="font-bold text-slate-900 m-0">Speed</h5>
<p className="text-slate-600 text-sm m-0">Create barcodes instantly without technical knowledge.</p>
</div>
</div>
<div className="flex gap-4 items-start">
<CheckCircle className="w-5 h-5 text-green-500 mt-1 shrink-0" />
<div>
<h5 className="font-bold text-slate-900 m-0">Accuracy</h5>
<p className="text-slate-600 text-sm m-0">Reduce manual data entry errors.</p>
</div>
</div>
<div className="flex gap-4 items-start">
<CheckCircle className="w-5 h-5 text-green-500 mt-1 shrink-0" />
<div>
<h5 className="font-bold text-slate-900 m-0">Flexibility</h5>
<p className="text-slate-600 text-sm m-0">Generate barcodes for different formats and use cases.</p>
</div>
</div>
<div className="flex gap-4 items-start">
<CheckCircle className="w-5 h-5 text-green-500 mt-1 shrink-0" />
<div>
<h5 className="font-bold text-slate-900 m-0">Cost-effective</h5>
<p className="text-slate-600 text-sm m-0">No need for expensive software or hardware.</p>
</div>
</div>
</div>
<p>
For small businesses, online shops, and startups, a <strong>free Barcode Generator</strong> is often the easiest way to get started.
</p>
<h2>Barcode vs QR Code</h2>
<p>
Although barcodes and QR codes are often confused, they serve different purposes. A barcode stores data horizontally and is mainly used for product identification. A <Link href="/tools/url-qr-code" className="text-blue-600 hover:underline">QR code</Link> stores data both horizontally and vertically and can contain more complex information such as URLs or <Link href="/tools/vcard-qr-code" className="text-blue-600 hover:underline">contact details</Link>.
</p>
<p>
If you only need to identify products or inventory items, a classic barcode is usually the better choice.
</p>
<h2>Are Barcodes Free to Use?</h2>
<p>
The barcode image itself can be generated for free using a Barcode Generator. However, for retail products sold internationally, the barcode number may need to be officially registered through organizations such as GS1. This ensures that the barcode is unique and recognized globally.
</p>
<p>
For internal use, testing, or small projects, free barcode generation is usually sufficient.
</p>
<h2>Use Cases for Barcodes</h2>
<p>Barcodes are used in many industries, including:</p>
<ul className="list-disc pl-6 space-y-2 mb-8">
<li>Retail and e-commerce</li>
<li>Inventory and warehouse management</li>
<li>Shipping and logistics</li>
<li>Libraries and document tracking</li>
<li>Event tickets and labeling</li>
</ul>
<p>
A reliable <strong>Barcode Generator</strong> helps streamline these processes and improves efficiency.
</p>
<h2>Understanding Check Digits</h2>
<p>
Most barcodes (like EAN and UPC) include a "Check Digit"—the last number in the sequence. This digit is calculated mathematically from the other numbers to ensure the barcode is scanned correctly. Even if a barcode is slightly damaged or scratched, the scanner uses the check digit to verify the integrity of the data.
</p>
<h2>Best Practices for Printing Barcodes</h2>
<p>
To ensure your barcodes scan instantly at the checkout or in the warehouse, follow these printing tips:
</p>
<ul className="list-disc pl-6 space-y-2 mb-8">
<li><strong>High Contrast:</strong> Always print black bars on a white background. Reverse colors (white bars on black) often fail to scan.</li>
<li><strong>Quiet Zone:</strong> Leave enough white space (margins) on the left and right sides of the barcode.</li>
<li><strong>Resolution:</strong> For professional labels, use <strong>SVG format</strong> (vector) or high-resolution PNGs (at least 300 DPI) to avoid blurry edges.</li>
<li><strong>Size:</strong> Do not scale the barcode too small. Standard EAN-13 codes should be at least 30mm wide for reliable scanning.</li>
</ul>
<hr className="my-12 border-slate-200" />
<div className="flex items-center gap-3 mb-6 not-prose">
<HelpCircle className="w-6 h-6 text-blue-500" />
<h2 className="text-2xl font-bold text-slate-900 m-0">Frequently Asked Questions (FAQ)</h2>
</div>
<div className="not-prose space-y-8">
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ What is a Barcode Generator?</h5>
<p className="text-slate-600">A Barcode Generator is an online tool that converts numbers or text into scannable barcode images that can be used for products, labels, and inventory systems.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ Is this barcode generator free to use?</h5>
<p className="text-slate-600">Yes, our online barcode generator is completely free to use with no hidden costs or sign-ups required. You can generate, download, and print barcodes instantly.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ Which barcode format should I use?</h5>
<p className="text-slate-600">
<strong>EAN-13:</strong> Standard for retail products in Europe and globally.<br />
<strong>UPC-A:</strong> Standard for retail products in USA/Canada.<br />
<strong>Code 128:</strong> Best for logistics, shipping, and internal tracking (supports letters & numbers).
</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ Can I download barcodes in vector format (SVG)?</h5>
<p className="text-slate-600">Yes! We offer <strong>SVG downloads</strong>. SVG files are vector-based, meaning they can be scaled to any size without losing quality—perfect for professional product packaging.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ How do I generate a barcode online?</h5>
<p className="text-slate-600">To generate a barcode online, enter your product number or text, select the desired barcode format (such as EAN-13 or Code 128), and click the generate button. The barcode will be created instantly.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ Are generated barcodes scannable?</h5>
<p className="text-slate-600">Yes, barcodes generated with a proper barcode generator are fully scannable. We generate standard-compliant barcodes readable by any standard optical or laser barcode scanner.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ Can I use these barcodes for Amazon (EAN/UPC)?</h5>
<p className="text-slate-600">You can generate the <em>image</em> for Amazon here if you already have your EAN/UPC number. However, you cannot "create" a valid global EAN number here—you must purchase those official numbers from GS1 to sell on major platforms like Amazon.</p>
</div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-2">❓ What is the difference between a barcode and a QR code?</h5>
<p className="text-slate-600">A barcode stores data horizontally (1D) and is mainly used for product IDs. A QR code stores data in 2D (matrix) and can hold much more information, such as URLs, vCards, or WiFi credentials.</p>
</div>
</div>
<div className="mt-12 p-6 bg-slate-900 rounded-xl text-white not-prose">
<h4 className="text-lg font-bold mb-2">Final Thoughts</h4>
<p className="text-slate-300 m-0">
A Barcode Generator is a simple yet powerful tool that helps businesses save time, reduce errors, and improve operational efficiency. By choosing the right barcode format and using a reliable generator, you can create professional barcodes that work across different systems and industries.
</p>
</div>
</div>
</section>
);
}

38
src/app/(marketing-de)/layout.tsx
View File

@@ -9,7 +9,7 @@ export const metadata: Metadata = {
default: 'QR Master – QR Code Generator & Analytics',
template: '%s | QR Master',
},
description: 'Erstellen Sie dynamische QR Codes, verfolgen Sie Scans und skalieren Sie Kampagnen mit sicheren Analysen.',
description: 'Erstellen Sie dynamische QR Codes für Feedback, PDF, Coupons und App Stores. Verfolgen Sie Scans und skalieren Sie Kampagnen mit sicheren Analysen.',
metadataBase: new URL('https://www.qrmaster.net'),
icons: {
icon: [
@@ -22,7 +22,7 @@ export const metadata: Metadata = {
type: 'website',
siteName: 'QR Master',
title: 'QR Master – QR Code Generator & Analytics',
description: 'Erstellen Sie dynamische QR Codes, verfolgen Sie Scans und skalieren Sie Kampagnen mit sicheren Analysen.',
description: 'Erstellen Sie dynamische QR Codes für Feedback, PDF, Coupons und App Stores. Verfolgen Sie Scans und skalieren Sie Kampagnen mit sicheren Analysen.',
url: 'https://www.qrmaster.net/qr-code-erstellen',
locale: 'de_DE',
images: [
@@ -42,30 +42,24 @@ export const metadata: Metadata = {
robots: { index: true, follow: true },
};
export default function RootMarketingDeLayout({
export default function MarketingDeGroupLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="de">
<head>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationSchema()) }}
/>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(websiteSchema()) }}
/>
</head>
<body className="font-sans">
<Providers>
<MarketingDeLayout>
{children}
</MarketingDeLayout>
</Providers>
</body>
</html>
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationSchema()) }}
/>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(websiteSchema()) }}
/>
<MarketingDeLayout>
{children}
</MarketingDeLayout>
</>
);
}

12
src/app/(marketing-de)/qr-code-erstellen/page.tsx
View File

@@ -22,7 +22,7 @@ function truncateAtWord(text: string, maxLength: number): string {
export async function generateMetadata(): Promise<Metadata> {
const title = 'QR Code Erstellen – Kostenlos | QR Master';
const description = 'Erstellen Sie QR Codes kostenlos in Sekunden. Dynamische QR-Codes mit Tracking, Branding und Massen-Erstellung. Für immer kostenlos.';
const description = 'Erstellen Sie QR Codes kostenlos in Sekunden. Dynamische QR-Codes für Feedback, PDF, Coupons & App Stores. Mit Tracking, Branding und Massen-Erstellung. Für immer kostenlos.';
return {
title: {
@@ -37,7 +37,11 @@ export async function generateMetadata(): Promise<Metadata> {
'qr codes erstellen',
'qr code erstellen kostenlos',
'dynamischer qr code',
'qr code mit logo'
'qr code mit logo',
'feedback qr code',
'pdf qr code',
'coupon qr code',
'app store qr code'
],
alternates: {
canonical: 'https://www.qrmaster.net/qr-code-erstellen',
@@ -84,7 +88,7 @@ export default function QRCodeErstellenPage() {
<div className="sr-only" aria-hidden="false">
<p>
Erstellen Sie professionelle QR Codes für Ihr Unternehmen mit QR Master. Unser dynamischer QR Code Generator
ermöglicht es Ihnen, trackbare QR Codes zu erstellen, Ziel-URLs jederzeit zu ändern und detaillierte Statistiken einzusehen.
ermöglicht es Ihnen, trackbare QR Codes für Feedback, PDF-Dateien, Coupons und App Stores zu erstellen, Ziel-URLs jederzeit zu ändern und detaillierte Statistiken einzusehen.
Perfekt für Restaurants, Einzelhandel, Events und Marketing-Kampagnen.
</p>
<p>
@@ -93,7 +97,7 @@ export default function QRCodeErstellenPage() {
vCard QR Codes für digitale Visitenkarten und QR Codes für Restaurant-Speisekarten.
</p>
<p>
Starten Sie kostenlos mit 3 dynamischen QR Codes und unbegrenzten statischen Codes. Upgrade auf Pro für 50 Codes
Starten Sie kostenlos mit 8 dynamischen QR Codes und unbegrenzten statischen Codes. Upgrade auf Pro für 50 Codes
mit erweiterten Statistiken, oder Business für 500 Codes mit Massen-Erstellung und Prioritäts-Support.
</p>
</div>

10
src/app/coupon/[slug]/page.tsx
View File

@@ -142,7 +142,7 @@ export default function CouponPage() {
{/* Redeem Button */}
{coupon.redeemUrl && !isExpired && (
<a
href={coupon.redeemUrl}
href={ensureAbsoluteUrl(coupon.redeemUrl)}
target="_blank"
rel="noopener noreferrer"
className="block w-full py-4 rounded-xl font-semibold text-center bg-gradient-to-r from-[#076653] to-[#0C342C] text-white hover:from-[#087861] hover:to-[#0E4036] transition-all shadow-lg shadow-emerald-200"
@@ -165,3 +165,11 @@ export default function CouponPage() {
</div>
);
}
function ensureAbsoluteUrl(url: string | undefined): string | undefined {
if (!url) return undefined;
if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(url)) {
return url;
}
return `https://${url}`;
}

17
src/app/feedback/[slug]/page.tsx
View File

@@ -55,7 +55,8 @@ export default function FeedbackPage() {
if (rating >= 4 && feedback?.googleReviewUrl) {
setTimeout(() => {
window.location.href = feedback.googleReviewUrl!;
const url = ensureAbsoluteUrl(feedback.googleReviewUrl);
if (url) window.location.href = url;
}, 2000);
}
} catch (error) {
@@ -119,9 +120,9 @@ export default function FeedbackPage() {
{/* Card */}
<div className="bg-white rounded-3xl shadow-xl overflow-hidden">
{/* Colored Header */}
<div className="bg-gradient-to-r from-[#4C5F4E] via-[#C6C0B3] to-[#FAF8F5] p-8 text-center">
<div className="w-14 h-14 bg-white/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
<Star className="w-7 h-7 text-white" />
<div className="bg-gradient-to-r from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E] p-8 text-center">
<div className="w-14 h-14 bg-[#4C5F4E]/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
<Star className="w-7 h-7 text-[#4C5F4E]" />
</div>
<h1 className="text-2xl font-bold mb-1 text-gray-900">How was your experience?</h1>
<p className="text-gray-700">{feedback.businessName}</p>
@@ -193,3 +194,11 @@ export default function FeedbackPage() {
</div>
);
}
function ensureAbsoluteUrl(url: string | undefined): string | undefined {
if (!url) return undefined;
if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(url)) {
return url;
}
return `https://${url}`;
}

135
src/app/layout.tsx
View File

@@ -1,72 +1,65 @@
import type { Metadata } from 'next';
import { Suspense } from 'react';
import '@/styles/globals.css';
import { ToastContainer } from '@/components/ui/Toast';
import AuthProvider from '@/components/SessionProvider';
import { PostHogProvider } from '@/components/PostHogProvider';
import CookieBanner from '@/components/CookieBanner';
const isIndexable = process.env.NEXT_PUBLIC_INDEXABLE === 'true';
export const metadata: Metadata = {
metadataBase: new URL('https://www.qrmaster.net'),
title: {
default: 'QR Master – Smart QR Generator & Analytics',
template: '%s | QR Master',
},
description: 'Create dynamic QR codes, track scans, and scale campaigns with secure analytics.',
keywords: 'QR code, QR generator, dynamic QR, QR tracking, QR analytics, branded QR, bulk QR generator',
robots: isIndexable
? { index: true, follow: true }
: { index: false, follow: false },
icons: {
icon: [
{ url: '/favicon.svg', type: 'image/svg+xml' },
{ url: '/logo.svg', type: 'image/svg+xml' },
],
apple: '/logo.svg',
},
twitter: {
card: 'summary_large_image',
site: '@qrmaster',
images: ['https://www.qrmaster.net/static/og-image.png'],
},
openGraph: {
type: 'website',
siteName: 'QR Master',
title: 'QR Master – Smart QR Generator & Analytics',
description: 'Create dynamic QR codes, track scans, and scale campaigns with secure analytics.',
url: 'https://www.qrmaster.net',
images: [
{
url: 'https://www.qrmaster.net/static/og-image.png',
width: 1200,
height: 630,
alt: 'QR Master - Dynamic QR Code Generator and Analytics Platform',
},
],
locale: 'en_US',
},
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className="font-sans">
<Suspense fallback={null}>
<PostHogProvider>
<AuthProvider>
{children}
</AuthProvider>
<CookieBanner />
<ToastContainer />
</PostHogProvider>
</Suspense>
</body>
</html>
);
import type { Metadata } from 'next';
import { Suspense } from 'react';
import '@/styles/globals.css';
import { Providers } from '@/components/Providers';
const isIndexable = process.env.NEXT_PUBLIC_INDEXABLE === 'true';
export const metadata: Metadata = {
metadataBase: new URL('https://www.qrmaster.net'),
title: {
default: 'QR Master – Smart QR Generator & Analytics',
template: '%s | QR Master',
},
description: 'Create dynamic QR codes, track scans, and scale campaigns with secure analytics.',
keywords: 'QR code, QR generator, dynamic QR, QR tracking, QR analytics, branded QR, bulk QR generator',
robots: isIndexable
? { index: true, follow: true }
: { index: false, follow: false },
icons: {
icon: [
{ url: '/favicon.svg', type: 'image/svg+xml' },
{ url: '/logo.svg', type: 'image/svg+xml' },
],
apple: '/logo.svg',
},
twitter: {
card: 'summary_large_image',
site: '@qrmaster',
images: ['https://www.qrmaster.net/static/og-image.png'],
},
openGraph: {
type: 'website',
siteName: 'QR Master',
title: 'QR Master – Smart QR Generator & Analytics',
description: 'Create dynamic QR codes, track scans, and scale campaigns with secure analytics.',
url: 'https://www.qrmaster.net',
images: [
{
url: 'https://www.qrmaster.net/static/og-image.png',
width: 1200,
height: 630,
alt: 'QR Master - Dynamic QR Code Generator and Analytics Platform',
},
],
locale: 'en_US',
},
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className="font-sans">
<Suspense fallback={null}>
<Providers>
{children}
</Providers>
</Suspense>
</body>
</html>
);
}

21
src/app/r/[slug]/route.ts
View File

@@ -32,7 +32,7 @@ export async function GET(
switch (qrCode.contentType) {
case 'URL':
destination = content.url || 'https://example.com';
destination = ensureAbsoluteUrl(content.url);
break;
case 'PHONE':
destination = `tel:${content.phone}`;
@@ -61,7 +61,7 @@ export async function GET(
break;
case 'PDF':
// Direct link to file
destination = content.fileUrl || 'https://example.com/file.pdf';
destination = ensureAbsoluteUrl(content.fileUrl);
break;
case 'APP':
// Smart device detection for app stores
@@ -70,11 +70,11 @@ export async function GET(
const isAndroid = /android/i.test(userAgent);
if (isIOS && content.iosUrl) {
destination = content.iosUrl;
destination = ensureAbsoluteUrl(content.iosUrl);
} else if (isAndroid && content.androidUrl) {
destination = content.androidUrl;
destination = ensureAbsoluteUrl(content.androidUrl);
} else {
destination = content.fallbackUrl || content.iosUrl || content.androidUrl || 'https://example.com';
destination = ensureAbsoluteUrl(content.fallbackUrl || content.iosUrl || content.androidUrl);
}
break;
case 'COUPON':
@@ -234,7 +234,16 @@ async function trackScan(qrId: string, request: NextRequest) {
},
});
} catch (error) {
console.error('Error tracking scan:', error);
// Don't throw - this is fire and forget
}
}
function ensureAbsoluteUrl(url: string): string {
if (!url) return 'https://example.com';
// Check if it already has a protocol (http://, https://, myapp://, mailto:, etc.)
if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(url)) {
return url;
}
// Default to https for web URLs
return `https://${url}`;
}

69
src/components/PostHogProvider.tsx
View File

@@ -4,17 +4,36 @@ import { useEffect, useState, useRef } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
import posthog from 'posthog-js';
export function PostHogProvider({ children }: { children: React.ReactNode }) {
import { Suspense } from 'react';
export function PostHogPageView() {
const pathname = usePathname();
const searchParams = useSearchParams();
const [isInitialized, setIsInitialized] = useState(false);
const initializationAttempted = useRef(false);
useEffect(() => {
const cookieConsent = localStorage.getItem('cookieConsent');
if (cookieConsent === 'accepted' && pathname && (posthog as any)._loaded) {
let url = window.origin + pathname;
if (searchParams && searchParams.toString()) {
url = url + `?${searchParams.toString()}`;
}
posthog.capture('$pageview', {
$current_url: url,
});
}
}, [pathname, searchParams]);
return null;
}
export function PostHogProvider({ children }: { children: React.ReactNode }) {
const [initializationAttempted, setInitializationAttempted] = useState(false);
// Initialize PostHog once
useEffect(() => {
// Prevent double initialization in React Strict Mode
if (initializationAttempted.current) return;
initializationAttempted.current = true;
if (initializationAttempted) return;
setInitializationAttempted(true);
const cookieConsent = localStorage.getItem('cookieConsent');
@@ -27,50 +46,32 @@ export function PostHogProvider({ children }: { children: React.ReactNode }) {
return;
}
// Check if already initialized (using _loaded property)
if (!(posthog as any)._loaded) {
posthog.init(apiKey, {
api_host: apiHost || 'https://us.i.posthog.com',
person_profiles: 'identified_only',
capture_pageview: false, // Manual pageview tracking
capture_pageview: false,
capture_pageleave: true,
autocapture: true,
respect_dnt: true,
opt_out_capturing_by_default: false,
});
// Enable debug mode in development
if (process.env.NODE_ENV === 'development') {
posthog.debug();
}
// Set initialized immediately after init
setIsInitialized(true);
} else {
setIsInitialized(true); // Already loaded
}
}
}, [initializationAttempted]);
// NO cleanup function - PostHog should persist across page navigation
}, []);
// Track page views ONLY after PostHog is initialized
useEffect(() => {
const cookieConsent = localStorage.getItem('cookieConsent');
if (cookieConsent === 'accepted' && pathname && isInitialized) {
let url = window.origin + pathname;
if (searchParams && searchParams.toString()) {
url = url + `?${searchParams.toString()}`;
}
posthog.capture('$pageview', {
$current_url: url,
});
}
}, [pathname, searchParams, isInitialized]); // Added isInitialized dependency
return <>{children}</>;
return (
<>
<Suspense fallback={null}>
<PostHogPageView />
</Suspense>
{children}
</>
);
}
/**

5
src/components/Providers.tsx
View File

@@ -3,15 +3,12 @@
import { Suspense } from 'react';
import { ToastContainer } from '@/components/ui/Toast';
import AuthProvider from '@/components/SessionProvider';
import { PostHogProvider, PostHogPageView } from '@/components/PostHogProvider';
import { PostHogProvider } from '@/components/PostHogProvider';
import CookieBanner from '@/components/CookieBanner';
export function Providers({ children }: { children: React.ReactNode }) {
return (
<PostHogProvider>
<Suspense fallback={null}>
<PostHogPageView />
</Suspense>
<AuthProvider>
{children}
</AuthProvider>

16
src/components/marketing/InstantGenerator.tsx
View File

@@ -8,6 +8,8 @@ import { Input } from '@/components/ui/Input';
import { Button } from '@/components/ui/Button';
import { Badge } from '@/components/ui/Badge';
import { calculateContrast } from '@/lib/utils';
import { trackEvent } from '@/components/PostHogProvider';
import { useEffect } from 'react';
interface InstantGeneratorProps {
t: any; // i18n translation function
@@ -20,6 +22,18 @@ export const InstantGenerator: React.FC<InstantGeneratorProps> = ({ t }) => {
const [cornerStyle, setCornerStyle] = useState('square');
const [size, setSize] = useState(200);
useEffect(() => {
if (url) {
trackEvent('instant_qr_generated', {
url_length: url.length,
foreground: foregroundColor,
background: backgroundColor,
corner_style: cornerStyle,
size: size
});
}
}, [url, foregroundColor, backgroundColor, cornerStyle, size]);
const contrast = calculateContrast(foregroundColor, backgroundColor);
const hasGoodContrast = contrast >= 4.5;
@@ -38,6 +52,7 @@ export const InstantGenerator: React.FC<InstantGeneratorProps> = ({ t }) => {
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(downloadUrl);
trackEvent('instant_qr_downloaded', { format: 'svg' });
} else {
// Convert SVG to PNG using Canvas
const canvas = document.createElement('canvas');
@@ -65,6 +80,7 @@ export const InstantGenerator: React.FC<InstantGeneratorProps> = ({ t }) => {
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(downloadUrl);
trackEvent('instant_qr_downloaded', { format: 'png' });
}
});
URL.revokeObjectURL(url);

2
src/i18n/de.json
View File

@@ -130,7 +130,7 @@
"price": "€0",
"period": "für immer",
"features": [
"3 dynamische QR-Codes",
"8 dynamische QR-Codes",
"Unbegrenzte statische QR-Codes",
"Basis-Scan-Tracking",
"Standard QR-Design-Vorlagen"

2
src/i18n/en.json
View File

@@ -137,7 +137,7 @@
"price": "€0",
"period": "forever",
"features": [
"3 dynamic QR codes",
"8 dynamic QR codes",
"Unlimited static QR codes",
"Basic scan tracking",
"Standard QR design templates",

20
src/lib/db.ts
View File

@@ -1,11 +1,11 @@
import { PrismaClient } from '@prisma/client';
const globalForPrisma = globalThis as unknown as {
prisma: PrismaClient | undefined;
};
export const db =
globalForPrisma.prisma ??
new PrismaClient();
import { PrismaClient } from '@prisma/client';
const globalForPrisma = globalThis as unknown as {
prisma: PrismaClient | undefined;
};
export const db =
globalForPrisma.prisma ??
new PrismaClient();
if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = db;