DEV Community: BoopyKiki

EPUB Optimizer

BoopyKiki — Sat, 09 Aug 2025 07:03:22 +0000

A Node.js utility to optimize EPUB files by compressing HTML, CSS, images and recompressing the archive. This tool can significantly reduce EPUB file sizes while maintaining compatibility with e-readers and ensuring EPUB specification compliance.

Why Use EPUB Optimizer?

✅ Dramatically reduces file size - Typically 70-90% smaller files
✅ Maintains full compatibility - Works with all major e-readers (Kindle, Apple Books, etc.)
✅ Preserves quality - Smart optimization without visual degradation
✅ Supports all EPUB types - Both modern (OPS) and legacy (OEBPS) formats
✅ Zero setup with Docker - No need to install Node.js, Java, or other dependencies
✅ Battle-tested - Used for real book publishing workflows

Quick Start
Features
About This Project
Requirements
Installation
EPUBCheck Setup
Docker Alternative
Usage
- Available Scripts
- Modern Workflow
- Command Line Options
- Docker Usage
Project Structure
Development Information
- Source and Build Separation
- Import Structure
- Testing
- Development and Production
Linting and Formatting
Minification
Modular Fix Scripts
- Customizing the Optimization Process
Common Issues
Troubleshooting
Dependencies
License

About This Project

I use this project to optimize EPUB files that I create using Pages on Mac. My workflow is:

Write (text and images) in Pages.
Insert a TOC page via the menu: "Insert > Table of Contents > Document". (In the script, I update the EPUB structure files with customizations, adding the cover title as a clickable item in both the book's internal summary page and the navigation table of contents.)
Export my work as an EPUB file.
Fill in the required information.
For "Cover": check the option "Use the first page as the book cover image".
For "Layout": check the reflowable option, and check both "Use table of contents" and "Embed fonts".

After exporting, my original EPUB file is about 24.4MB. I use this script to optimize it (resulting in about 7.3MB). Then I test the result in Apple Books, Kindle Previewer, etc.

This script is designed for this workflow (I don't use any other tools), but anyone who wants to optimize their EPUB file is welcome to try it! If you have customization needs different from mine, check the Modular Fix Scripts section to learn how to enable/disable specific features. If you have any questions or issues, let me know. Enjoy! :)

Quick Start

Note:
For both Docker and traditional usage, place your EPUB file(s) in the project root directory (the same directory as your package.json and Dockerfile), or specify the correct path to your file.

Traditional installation:

pnpm install
pnpm build
pnpm optimize -i YourBook.epub -o YourBook-optimized.epub

Or use Docker (no setup required):

git clone https://github.com/kiki-le-singe/epub-optimizer.git
cd epub-optimizer
docker build -t epub-optimizer .
docker run --rm -v $(pwd):/epub-files epub-optimizer \
  -i /epub-files/YourBook.epub -o /epub-files/YourBook-optimized.epub

Features

Supports both "OPS" (modern) and "OEBPS" (legacy) EPUB content directories (auto-detected)
HTML/XHTML minification (removes whitespace, comments, and unnecessary code)
CSS optimization (minifies and combines rules)
Image compression (JPEG, PNG, WebP, GIF, AVIF, SVG optimization without significant quality loss)
PNG to JPEG conversion for non-transparent images (significantly reduces file size)
JavaScript minification (reduces script size)
Font subsetting (reduces font file sizes by including only used characters; may not work on encrypted or unsupported fonts)
SVG optimization (minifies SVG files using SVGO)
Image downscaling (optionally resizes large images to a max dimension for e-reader compatibility)
Lazy loading for images (adds loading="lazy" to all <img> tags in XHTML for EPUB3 readers)
Cross-platform archive processing (pure JavaScript implementation with no external dependencies)
Archive recompression (EPUB-compliant ZIP packaging with proper compression settings)
EPUB validation against the EPUB specification
XML/XHTML validation fixing (automatically repairs common validation issues)
Modular fix scripts for EPUB and OPF structure
Command-line interface with customizable options
File size comparison reporting
Comprehensive test suite with high coverage

Note:

Font subsetting is attempted on all fonts, but some fonts (e.g., encrypted or certain OTF/TTF formats) may not be supported by the subsetting library and will be skipped.

SVG optimization, image downscaling, and lazy loading are fully automated and require no manual intervention.

Requirements

Only required for traditional installation (skip if using Docker):

Node.js 14 or higher (my version: v23.11.0)
Java Runtime Environment (JRE) 1.7 or higher (my version: openjdk 23.0.2)
pnpm (my version: 9.5.0)
npm or pnpm for package management

Note: All the examples below use pnpm, but you can substitute with npm if preferred.

Installation

# Clone the repository
git clone https://github.com/kiki-le-singe/epub-optimizer.git
cd epub-optimizer

# Install dependencies
pnpm install

# Build the project (required before running optimize commands)
pnpm build

EPUBCheck Setup

This tool requires EPUBCheck to validate EPUB files. Follow these steps:

Download EPUBCheck from the official website
Extract the downloaded zip file
Copy the extracted epubcheck-x.x.x folder (where x.x.x is the version) to the root of this project
Make sure the folder is named epubcheck to match the path in epubcheckPath in src/utils/config.ts

Docker Alternative

Docker Requirement:
You must have Docker installed on your system to use the Docker method.

Docker provides a containerized environment with all dependencies pre-installed, making it easier to run the EPUB optimizer without complex setup.

Docker Requirements

Docker installed on your system

Docker Installation

# Clone the repository
git clone https://github.com/kiki-le-singe/epub-optimizer.git
cd epub-optimizer

# Build the Docker image (includes all dependencies)
docker build -t epub-optimizer .

Docker Quick Start

# Optimize an EPUB file
docker run --rm -v $(pwd):/epub-files epub-optimizer \
  -i /epub-files/your-book.epub -o /epub-files/your-book-optimized.epub

Benefits of Docker approach:

✅ No need to install Node.js, Java, or pnpm
✅ Works consistently across all platforms (Windows, Mac, Linux)
✅ Includes EPUBCheck automatically
✅ Guaranteed to work with tested dependency versions

Usage

Available Scripts

Script	Description
`build`	Build TypeScript for production (with minification)
`build:dev`	Build TypeScript for development (no minification)
`build:prod`	Build TypeScript with minification for production
`minify:safe`	Safely minify JavaScript in dist/ directory using TypeScript source (via ts-node)
`optimize`	Run optimizer, keeping temp files
`optimize:clean`	Run optimizer, removing temp files afterward
`cleanup`	Remove temporary files
`test`	Run tests in watch mode
`test:run`	Run tests once and exit
`test:coverage`	Run tests with coverage report
`lint`	Lint TypeScript files in src and scripts directories
`lint:fix`	Lint and auto-fix TypeScript files in src and scripts
`format`	Auto-format all .ts, .json, and .md files with Prettier
`format:check`	Check formatting of all .ts, .json, and .md files with Prettier

Modern Workflow

# Build for development (faster, not minified)
pnpm build:dev

# Build for production (with minification)
pnpm build
# or
pnpm build:prod

# Then run the optimizer
pnpm optimize -i YourBook.epub -o YourBook-optimized.epub

# Run tests
pnpm test
# or run tests once and exit
pnpm test:run

Command Line Options

Usage: pnpm optimize [options]

Options:
  -i, --input       Input EPUB file path                    [string] [default: "mybook.epub"]
  -o, --output      Output EPUB file path                   [string] [default: "mybook_opt.epub"]
  --jpg-quality     JPEG compression quality (0-100)        [number] [default: 70]
  --png-quality     PNG compression quality (0-1 scale)     [number] [default: 0.6]
  --clean           Clean temporary files after processing  [boolean] [default: false]
  -h, --help        Show help message                       [boolean]
  -v, --version     Show version number                     [boolean]

Examples:
  pnpm optimize -i book.epub -o book-optimized.epub            Basic optimization
  pnpm optimize:clean -i book.epub -o book-opt.epub            Optimize and clean temp files
  pnpm optimize -i book.epub -o book-opt.epub --jpg-quality 85 Higher JPEG quality (less compression)
  pnpm optimize -i book.epub -o book-opt.epub --png-quality 0.9 Higher PNG quality (less compression)
  pnpm optimize -i input.epub -o output.epub --jpg-quality 85 --png-quality 0.8 Custom image settings

Script Differences:

pnpm optimize - Optimizes the EPUB file and keeps temporary files for inspection

pnpm optimize:clean - Same as optimize but removes temporary files afterward

pnpm cleanup - Manually removes the temporary directory (temp_epub)

Important Note: This tool is designed to work with files in the project directory. Using absolute paths or paths outside the project directory may cause issues.

Docker Usage

If you're using the Docker alternative, here are additional usage examples:

Basic Docker optimization:

docker run --rm -v $(pwd):/epub-files epub-optimizer \
  -i /epub-files/book.epub -o /epub-files/book-optimized.epub

Docker with custom image quality:

docker run --rm -v $(pwd):/epub-files epub-optimizer \
  -i /epub-files/book.epub -o /epub-files/book-optimized.epub \
  --jpg-quality 50 --png-quality 0.4

Docker command breakdown:

docker run --rm - Run container and remove it when done
-v $(pwd):/epub-files - Mount current directory to /epub-files in container
epub-optimizer - The Docker image name
Arguments after the image name are passed to the EPUB optimizer

Docker Note: Temporary files are automatically handled inside the container and don't affect your host system.

Project Structure

epub-optimizer/
├── dist/                   # Compiled JavaScript (production code)
├── optimize-epub.ts        # Main entry point (TypeScript)
├── package.json            # Package configuration
├── README.md               # Documentation
├── tsconfig.json           # TypeScript configuration
├── vitest.config.ts        # Test configuration
├── epubcheck/              # EPUBCheck for EPUB validation (not included in repo)
├── scripts/                # Build and maintenance scripts
│   └── minify-dist.ts      # Smart minification script for JavaScript files
└── src/                    # Source code directory
    ├── index.ts            # Main application logic
    ├── cli.ts              # Command-line interface
    ├── pipeline.ts         # Optimization pipeline
    ├── types.ts            # TypeScript type definitions
    ├── types.d.ts          # Additional TypeScript declarations
    ├── processors/         # Processing modules
    │   ├── archive-processor.ts    # EPUB extraction/compression
    │   ├── html-processor.ts       # HTML/CSS processing
    │   └── image-processor.ts      # Image optimization
    ├── scripts/            # Processing scripts
    │   ├── build.ts        # Full optimization pipeline script
    │   ├── create-epub.ts  # EPUB packaging script
    │   ├── validate-epub.ts # EPUB validation script
    │   ├── utils.ts        # Shared utilities for scripts
    │   ├── fix/            # General fix scripts (modular)
    │   │   ├── fix-span-tags.ts
    │   │   ├── fix-xml.ts
    │   │   └── index.ts    # Entry point for all general fixes
    │   └── ops/            # EPUB structure modifications
    │       ├── add-cover-image-property.ts
    │       ├── update-cover-linear.ts
    │       ├── update-toc-with-cover.ts
    │       ├── update-summary-page.ts
    │       └── update-structure.ts # Entry point for all structure updates
    └── utils/              # Utility modules
        └── config.ts       # Application configuration

Note: Test files are colocated with their respective source files but omitted from this structure for clarity.

Development Information

This project is built with TypeScript and uses modern ESM modules. Here's how the development workflow works:

Source and Build Separation

TypeScript source files are in the src/ and scripts/ directories
The compiled JavaScript output goes to the dist/ directory
The production build is highly optimized:
- Test files (*.test.ts) are completely excluded
- No TypeScript declaration files (*.d.ts) are generated
- No source maps are included
- JavaScript files are minified using Terser
- Comments are removed from the final code
You must run pnpm build before running any optimize commands

Import Structure

Source files use extensionless imports (e.g., import { foo } from './foo')
The build process adds .js extensions to imports in the compiled output for Node.js compatibility

Testing

Test files are colocated with the source files they test (e.g., src/index.ts and src/index.test.ts)
This "side-by-side" approach has several advantages:
- Easy to locate tests for any module
- Promotes keeping tests updated when changing implementation
- Makes it clear which parts of the codebase are covered by tests
- Simplifies relative imports between tests and implementation
Tests are written using Vitest, a modern test framework compatible with Jest syntax
Run tests with pnpm test (watch mode) or pnpm test:run (single run)
Run tests with coverage using pnpm test:coverage
Tests run in Node.js environment and mock external dependencies

Development and Production

For development: Make changes to TypeScript files and run pnpm build:dev
For production: Run pnpm build to create a minified, optimized dist/ directory
The optimize commands run against the compiled code in dist/

Linting and Formatting

Linting:
- pnpm run lint lints all TypeScript files in the src and scripts directories.
- pnpm run lint:fix does the same, but also auto-fixes issues where possible.
Formatting:
- pnpm run format auto-formats all .ts, .json, and .md files in the project using Prettier.
- pnpm run format:check checks formatting without making changes (useful for CI).

Minification

The production build process includes:

TypeScript compilation
ESM import path fixing
Smart JavaScript minification with Terser:
- Minifies all files in both src/ and scripts/ directories
- Uses a skip list to avoid minifying problematic files with syntax incompatibilities
- Maintains class names and function names for better error reporting
- Compresses and mangles variables for reduced file size
Source maps for debugging
Comment removal

Note: The minification script (minify:safe) is run using ts-node directly on the TypeScript source (scripts/minify-dist.ts), not on compiled JavaScript. This ensures the latest TypeScript logic is always used for minification.

Modular Fix Scripts

General fixes (e.g. span tags, XML/XHTML) are managed in src/scripts/fix/ and run via src/scripts/fix/index.ts.
Structure modifications (TOC, navigation, summary page) are managed in src/scripts/ops/ and run via src/scripts/ops/update-structure.ts.
To enable/disable a fix, comment or uncomment the relevant runCommand line in the corresponding index/entry file.
To add a new fix, create a new script in the appropriate folder and add a runCommand call in the index/entry file.

Customizing the Optimization Process

If you don't need all the features I've implemented for my own workflow, you can easily customize the process. Here are some examples:

Example: Skip adding cover to TOC - To do this, you'd comment out the line with update-toc-with-cover.js in src/scripts/ops/update-structure.ts
Example: Skip adding cover to summary page - Comment out the line with update-summary-page.js in src/scripts/ops/update-structure.ts
Example: Skip setting cover as first page - Comment out the line with update-cover-linear.js in src/scripts/ops/update-structure.ts
Example: Disable specific XML/HTML fixes - Comment out relevant script calls in src/scripts/fix/index.ts

After making any customizations, rebuild the project with pnpm build to apply your changes.

Common Issues

Docker Issues

"docker: command not found"

Install Docker first: Download Docker
Make sure Docker Desktop is running

"Permission denied" or file access errors

Ensure your EPUB file is in the project root or mounted directory
Check file permissions (especially on Linux/Mac)

Traditional Installation Issues

"Java not found" or EPUBCheck errors

Install Java JRE 1.7+ (see Requirements)
Download EPUBCheck manually (see EPUBCheck Setup)

"pnpm command not found"

Install pnpm: npm install -g pnpm
Or use npm instead: replace pnpm with npm in commands

Build errors

Run pnpm build before using pnpm optimize
Try pnpm install if dependencies are missing

File Issues

"Input file not found"

Check your file path and name (case-sensitive)
Make sure the EPUB file is in the correct directory
Use relative paths from the project root

"Output file permission errors"

Check write permissions in the output directory
Try a different output filename

Troubleshooting

If you encounter any issues, please check the GitHub issues page for existing issues or open a new one.

Dependencies

This project uses the following dependencies:

System Requirements

Node.js 14 or higher
Java Runtime Environment (JRE) 1.7 or higher (for EPUBCheck validation)
pnpm or npm for package management

Key npm Packages

cheerio - For robust HTML/XHTML DOM manipulation
clean-css - For CSS minification
fs-extra - Enhanced file system operations
html-minifier-terser - For HTML minification
sharp - For image optimization (JPEG, PNG, WebP, GIF, AVIF, SVG)
unzipper - For extracting EPUB files
yazl - For cross-platform EPUB archive creation (pure JavaScript ZIP implementation)
yargs - For command-line argument parsing

Development Dependencies

typescript - For static typing and compilation
terser - For JavaScript minification
vitest - For testing
typescript-eslint - For linting TypeScript code
prettier - For code formatting

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Optimize Next.js Performance with Smart Code Splitting: What to Load, When, and Why

BoopyKiki — Sat, 09 Aug 2025 06:55:55 +0000

When building modern web applications, performance isn't a luxury — it's a necessity. Next.js comes with built-in code splitting to help you deliver faster, leaner apps by loading only what’s needed.

So how can you go beyond the defaults and take more control over what gets loaded — and when?

In this article, we’ll explore how to use dynamic imports effectively in Next.js to optimize performance — especially for components and libraries that aren’t required on initial load.

See Demos in Action

Want to explore similar examples? Check out this GitHub repo - nextjs-perf-showcase with demo projects.

Why Code Splitting Matters
Static vs Dynamic Imports
When Might You Use Dynamic Imports?
Example: Dynamic Modal
Dynamic Tabs
Dynamically Load Heavy External Libraries
- Map with Leaflet
- Audio with WaveSurfer
- Charts with Chart.js
Does Next.js Split Code by Page Automatically?
Disabling SSR with next/dynamic
Key Points to Remember
Useful Links

1. Why Code Splitting Matters

Code splitting allows you to break your application into smaller JavaScript bundles (or “chunks”) that can be loaded on demand. This leads to:

⚡ Faster initial load times
📉 Reduced bundle sizes
📱 Better user experience — especially on slow or mobile networks

Without code splitting, users must download the entire app upfront — even if they only interact with a small part of it.

2. Static vs Dynamic Imports

With static imports:

import Component from "./MyComponent";

Everything is bundled and shipped during the initial load — even if the component isn’t used right away.

With dynamic imports:

const Component = dynamic(() => import("./MyComponent"));

The component is loaded only when it’s needed. This leads to smaller initial bundles and improved startup performance.

3. When Might You Use Dynamic Imports?

Use next/dynamic when a component:

🧱 Is heavy (e.g., charts, video players, maps)
💬 Is conditionally visible or secondary UI (e.g., modals, tooltips, dropdowns, some carousels)
🔐 Is restricted or role-based UI (e.g., admin panels, private sections)

In short: if a component isn’t needed upfront, you might consider loading it dynamically.

4. Example: Dynamic Modal

"use client";

import dynamic from "next/dynamic";
import { useState } from "react";

const Modal = dynamic(() => import("../components/Modal"));

export default function ModalContainer() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      {isOpen && <Modal onClose={() => setIsOpen(false)} />}
    </>
  );
}

In this example, the modal component is excluded from the initial bundle and only loaded when needed. This helps keep your main bundle lightweight.

5. Dynamic Tabs

Tabs are a great use case for dynamic imports — especially when the content of each tab is heavy (e.g., charts, maps, or long lists) and not immediately visible.

Let’s say you have a basic tab interface with four components: TabOverview, TabCharts, TabReports, and TabUsers.

"use client";

import dynamic from "next/dynamic";
import { useState } from "react";

const TabOverview = dynamic(() => import("./tabs/TabOverview"));
const TabCharts = dynamic(() => import("./tabs/TabCharts"));
const TabReports = dynamic(() => import("./tabs/TabReports"));
const TabUsers = dynamic(() => import("./tabs/TabUsers"));

const tabs = {
  tabOverview: TabOverview,
  tabCharts: TabCharts,
  tabReports: TabReports,
  tabUsers: TabUsers,
};

export default function Dashboard() {
  const [activeTab, setActiveTab] = useState("tabOverview");
  const ActiveTabContent = tabs[activeTab];

  return (
    <div>
      <button onClick={() => setActiveTab("tabOverview")}>Overview</button>
      <button onClick={() => setActiveTab("tabCharts")}>Charts</button>
      <button onClick={() => setActiveTab("tabReports")}>Reports</button>
      <button onClick={() => setActiveTab("tabUsers")}>Users</button>

      <div>
        <ActiveTabContent />
      </div>
    </div>
  );
}

6. Dynamically Load Heavy External Libraries

Heavy third-party libraries should also be imported dynamically. These libraries are often not needed on initial load, and can drastically increase your bundle size if included too early.

Let’s explore three practical examples.

🗺️ Example 1: Display a Map with `leaflet`

// src/app/contact/page.js (Server Component)

import MapSection from "@/components/MapSection";

export default function ContactPage() {
  return (
    <div>
      <h1>Contact Us</h1>
      <p>Email: foo@bar.com</p>
      <p>Phone: 0123456789</p>

      {/* Client Component for interactive part */}
      <MapSection />
    </div>
  );
}

"use client";

import { useState, useRef, useEffect } from "react";

export default function MapSection() {
  const [showMap, setShowMap] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const leafletRef = useRef(null);
  const mapContainerRef = useRef(null);
  const mapInstanceRef = useRef(null);

  // Preload Leaflet on hover
  async function preloadLeaflet() {
    if (!leafletRef.current) {
      leafletRef.current = await import("leaflet");
      await import("leaflet/dist/leaflet.css");
    }
  }

  async function loadMap() {
    setShowMap(true);
    setIsLoading(true);

    try {
      await preloadLeaflet();

      // Create map
      if (mapContainerRef.current && !mapInstanceRef.current) {
        const L = leafletRef.current;

        // Fix Leaflet default icon issue in Next.js
        delete L.Icon.Default.prototype._getIconUrl;
        L.Icon.Default.mergeOptions({
          iconUrl:
            "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
          iconRetinaUrl:
            "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
          shadowUrl:
            "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
        });

        // Initialize map
        const map = L.map(mapContainerRef.current).setView([48.86, 2.35], 13);
        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
          attribution: "© OpenStreetMap contributors",
        }).addTo(map);
        L.marker([48.86, 2.35]).addTo(map).bindPopup("Our office");

        mapInstanceRef.current = map;
      }
    } catch (error) {
      console.error("Error loading map:", error);
    } finally {
      setIsLoading(false);
    }
  }

  useEffect(() => {
    return () => {
      if (mapInstanceRef.current) {
        mapInstanceRef.current.remove();
        mapInstanceRef.current = null;
      }
    };
  }, []);

  return (
    <div>
      <button
        onMouseEnter={preloadLeaflet}
        onClick={loadMap}
        style={{
          padding: "10px 20px",
          fontSize: "16px",
          cursor: "pointer",
        }}
      >
        Show map
      </button>

      {showMap && (
        <div
          ref={mapContainerRef}
          style={{
            height: 400,
            marginTop: 20,
            position: "relative",
            backgroundColor: isLoading ? "#f0f0f0" : "transparent",
          }}
        >
          {isLoading && (
            <div
              style={{
                position: "absolute",
                top: "50%",
                left: "50%",
                transform: "translate(-50%, -50%)",
                zIndex: 1000,
              }}
            >
              <p>Loading map...</p>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

🎶 Example 2: Play an mp3 with `wavesurfer`

// src/app/player/page.js (Server Component)

import AudioPlayer from "@/components/AudioPlayer";

export default function AudioPlayerPage() {
  // Here you could fetch audio metadata from an API

  return (
    <div>
      {/* Client Component for interactive part */}
      <AudioPlayer audioUrl="/file.mp3" />
    </div>
  );
}

// src/components/AudioPlayer.js
"use client";

import { useState, useRef, useEffect } from "react";

export default function AudioPlayer({ audioUrl }) {
  const waveformRef = useRef(null);
  const wavesurferRef = useRef(null);
  const wavesurferLibRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  // Preload WaveSurfer on hover
  async function preloadWaveSurfer() {
    if (!wavesurferLibRef.current) {
      wavesurferLibRef.current = await import("wavesurfer.js");
    }
  }

  async function handlePlayPause() {
    // If already loaded, just toggle play/pause
    if (wavesurferRef.current) {
      wavesurferRef.current.playPause();
      return;
    }

    // First time: load and play
    setIsLoading(true);
    setError(null);

    try {
      // Load library if not preloaded
      await preloadWaveSurfer();

      const WaveSurfer = wavesurferLibRef.current.default;

      wavesurferRef.current = WaveSurfer.create({
        container: waveformRef.current,
        waveColor: "#4F4A85",
        progressColor: "#383351",
        url: audioUrl,
        height: 80,
        barWidth: 2,
        barRadius: 3,
      });

      wavesurferRef.current.on("ready", () => {
        setIsLoading(false);
        // Auto-play after loading
        wavesurferRef.current.play();
      });

      wavesurferRef.current.on("play", () => setIsPlaying(true));
      wavesurferRef.current.on("pause", () => setIsPlaying(false));
      wavesurferRef.current.on("finish", () => setIsPlaying(false));

      wavesurferRef.current.on("error", (err) => {
        setError(err.message);
        setIsLoading(false);
      });
    } catch (err) {
      setError("Failed to load audio player");
      setIsLoading(false);
    }
  }

  useEffect(() => {
    return () => {
      if (wavesurferRef.current) {
        wavesurferRef.current.destroy();
        wavesurferRef.current = null;
      }
    };
  }, []);

  return (
    <div>
      <div
        ref={waveformRef}
        style={{
          height: "80px",
          backgroundColor: "#f0f0f0",
          borderRadius: "4px",
          marginBottom: "10px",
        }}
      />

      {error && <p style={{ color: "red" }}>Error: {error}</p>}

      <button
        onClick={handlePlayPause}
        onMouseEnter={preloadWaveSurfer}
        disabled={isLoading}
        style={{
          padding: "10px 20px",
          fontSize: "16px",
          cursor: isLoading ? "not-allowed" : "pointer",
          opacity: isLoading ? 0.6 : 1,
        }}
      >
        {isLoading ? "Loading..." : isPlaying ? "⏸️ Pause" : "▶️ Play"}
      </button>
    </div>
  );
}

🗺️ Example 3: Display charts with `charts.js`

// src/app/dashboard/page.js (Server Component)

import ChartSection from "@/components/ChartSection";

export default function DashboardPage() {
  // Here you could fetch audio metadata from an API

  return (
    <div>
      {/* Client Component for interactive part */}
      <ChartSection />
    </div>
  );
}

// src/components/ChartSection.tsx
"use client";

import { useState, useRef, useEffect } from "react";

export default function ChartSection() {
  const [showChart, setShowChart] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const chartRef = useRef(null);
  const chartInstanceRef = useRef(null);
  const chartLibRef = useRef(null);

  // Create chart after canvas is rendered
  useEffect(() => {
    if (
      showChart &&
      chartRef.current &&
      !chartInstanceRef.current &&
      chartLibRef.current
    ) {
      createChart();
    }
  }, [showChart]);

  // Load Chart.js library
  async function loadChartLibrary() {
    if (chartLibRef.current) return chartLibRef.current;

    const chartModule = await import("chart.js");
    chartModule.Chart.register(...chartModule.registerables);
    chartLibRef.current = chartModule;
    return chartModule;
  }

  async function loadChart() {
    if (chartInstanceRef.current) return; // Already loaded

    setShowChart(true);
    setIsLoading(true);

    try {
      // ✨ Dynamic Import - The core technique
      await loadChartLibrary();

      // The actual chart creation will happen in the useEffect
      // after the canvas is rendered
    } catch (error) {
      console.error("Failed to load chart:", error);
    } finally {
      setIsLoading(false);
    }
  }

  // Create chart once canvas and library are ready
  function createChart() {
    if (!chartRef.current || !chartLibRef.current) return;

    try {
      // Create the chart
      chartInstanceRef.current = new chartLibRef.current.Chart(
        chartRef.current,
        {
          type: "bar",
          data: {
            labels: ["Jan", "Feb", "Mar", "Apr", "May"],
            datasets: [
              {
                label: "Sales (€)",
                data: [1200, 1900, 800, 1500, 2200],
                backgroundColor: "rgba(54, 162, 235, 0.2)",
                borderColor: "rgba(54, 162, 235, 1)",
                borderWidth: 2,
              },
            ],
          },
          options: {
            responsive: true,
            scales: {
              y: { beginAtZero: true },
            },
          },
        }
      );
    } catch (error) {
      console.error("Failed to create chart:", error);
    }
  }

  // Preload Chart.js on hover
  async function preloadChart() {
    try {
      await loadChartLibrary();
    } catch (error) {
      console.error("Failed to preload chart:", error);
    }
  }

  // Cleanup when component is destroyed
  useEffect(() => {
    return () => {
      if (chartInstanceRef.current) {
        chartInstanceRef.current.destroy();
      }
    };
  }, []);

  return (
    <div style={{ padding: "20px", maxWidth: "600px" }}>
      <h2>Sales Dashboard</h2>

      <button
        onClick={loadChart}
        onMouseEnter={preloadChart}
        disabled={isLoading}
        style={{
          padding: "10px 20px",
          fontSize: "16px",
          backgroundColor: "#007bff",
          color: "white",
          border: "none",
          borderRadius: "4px",
          cursor: isLoading ? "not-allowed" : "pointer",
          opacity: isLoading ? 0.6 : 1,
        }}
      >
        {isLoading ? "Loading Chart..." : "📊 Load Chart"}
      </button>

      {showChart && (
        <div style={{ marginTop: "20px", height: "400px" }}>
          <canvas ref={chartRef} />
        </div>
      )}
    </div>
  );
}

🚀 Conclusion

Dynamic imports are a simple yet powerful way to improve performance in Next.js. By loading code only when it's truly needed — and anticipating user intent — you can significantly reduce initial load times without compromising interactivity.

The bundle size savings can be substantial:

Chart.js: ~200KB+ (charts and visualizations)
Leaflet: ~145KB+ (interactive maps)
WaveSurfer: ~30KB+ (audio waveform rendering)

By dynamically importing these libraries, you can reduce your initial bundle by 375KB+ — that's faster load times, especially on mobile networks, and a better user experience for everyone.

7. Does Next.js Split Code by Page Automatically?

Yes. Next.js automatically splits your app by route — each page gets its own bundle. This means:

Visiting /about won’t load code for /dashboard
Navigation becomes faster
You get automatic lazy-loading for each page

You don’t need to configure this — it’s built into both the Pages Router and the App Router.

8. Disabling SSR with `next/dynamic`

In some cases, you may want to load a component only in the browser, and skip rendering it on the server. Next.js allows this by using dynamic() with ssr: false.

This is especially useful when the component relies on browser-only APIs, uses external libraries that only run client-side, or simply doesn’t need to be pre-rendered on the server.

Here’s a quick example:

"use client";

import dynamic from "next/dynamic";

const TrueClientComponent = dynamic(
  () => import("../components/TrueClientComponent"),
  { ssr: false }
);

export default function ClientComponent() {
  return (
    <div>
      <TrueClientComponent />
    </div>
  );
}

By setting ssr: false, the component is never rendered on the server — it’s fully skipped during SSR and only loaded on the client.

💡 Note (App Router)

In the App Router, components marked "use client" are still rendered on the server by default.

Setting ssr: false ensures the component is only executed in the browser, giving you true client-only behavior.

9. Key Points to Remember

Use dynamic imports to load "non-critical" code only when needed — for example: tabs, modals, or UI rendered conditionally.
Disable SSR (ssr: false) when a component depends on browser-only APIs such as window, document, or localStorage.
Next.js automatically splits pages and components into chunks to improve performance and load times.
Dynamically import large external libraries to reduce the size of your initial JavaScript bundle.

Start small. Test your impact. Split only what makes sense.
Not everything needs to be lazy-loaded — but knowing when and how can make a real difference.

Useful Links

⚠️ Just a note

This article doesn’t claim to be exhaustive or perfect — if something seems off or outdated, feel free to dig deeper or let me know. Happy to hear from you :)

🙏 Thanks for reading!

If you found this useful or have feedback, feel free to reach out. Always happy to learn, and glad if it helped.

A Complete Next.js Streaming Guide: loading.tsx, Suspense, and Performance

BoopyKiki — Sat, 09 Aug 2025 06:40:52 +0000

When building modern web apps, speed isn't just about fast loading — it's about feeling fast. Users expect immediate feedback, even when data takes time to load.

Next.js supports streaming out of the box with the App Router, helping you deliver pages progressively, piece by piece, instead of making users wait for everything.

In this article, I'll explain what streaming means in practice, how it works in Next.js, and why loading.tsx makes it even easier to implement.

See Demos in Action

Want to explore similar examples? Check out this GitHub repo - nextjs-perf-showcase with demo projects.

What is Streaming?
Why Does It Matter?
How Streaming Works in Next.js
Under the Hood: How Next.js Streaming Works
Real-World Example: E-commerce Dashboard
Error Boundaries with Streaming
Performance Monitoring
When to Use Each Loading State
Best Practices
Useful Links
Closing Thoughts

1. What is Streaming?

Instead of waiting for the entire server-rendered page to be ready, streaming lets the server send chunks of HTML progressively as they become available. The browser can start rendering immediately, showing users content as soon as possible.

Think of it like watching a video online — you don't wait for the entire file to download before playback starts. Same concept for web pages!

2. Why Does It Matter?

Without streaming, users stare at a blank screen while the server prepares the full response. This creates a poor experience, especially on slower connections.

With streaming:

⚡ Faster perceived performance — Users see content immediately
🧩 Load critical content first — Navigation, headers appear instantly
⏳ Non-blocking data fetches — Slow API calls don't freeze the entire page
📱 Better mobile experience — Progressive loading on slower networks

3. How Streaming Works in Next.js

Next.js provides two complementary approaches for implementing streaming:

Page-Level Streaming with `loading.tsx`

Use a loading.tsx file to handle loading states globally for an entire route. Next.js automatically wraps your page in a Suspense boundary, enabling the server to stream HTML progressively while showing your loading UI immediately.

Here's how it works in practice:

// app/dashboard/layout.tsx
export default function Layout({ children }) {
  return (
    <div className="dashboard-layout">
      <Sidebar />
      <div className="main-content">
        <Header />
        {children}
      </div>
    </div>
  );
}

// app/dashboard/loading.tsx
export default function Loading() {
  return (
    <div className="page-skeleton">
      <div className="skeleton-cards" />
      <div className="skeleton-chart" />
    </div>
  );
}

// app/dashboard/page.tsx
export default async function Dashboard() {
  // This entire page can take time to load
  const data = await fetchDashboardData();

  return (
    <div className="dashboard-content">
      <div className="metrics-cards">
        <MetricCard title="Revenue" value={data.revenue} />
        <MetricCard title="Users" value={data.users} />
        <MetricCard title="Orders" value={data.orders} />
      </div>
      <div className="analytics-chart">
        <Chart data={data.chartData} />
      </div>
    </div>
  );
}

Benefits of loading.tsx:

🔄 Automatically applies to the route segment
🎯 No need to wrap components in Suspense
📁 Works with nested routes
🎨 Keeps loading states organized

Component-Level Streaming with `<Suspense>`

For more granular control, use React's <Suspense> component to stream specific parts of your UI independently.

Next.js enables streaming by default with the App Router. Every Server Component can stream its output when wrapped with Suspense:

import { Suspense } from "react";

// This component loads fast
function Header() {
  return <h1>Dashboard</h1>;
}

// This component needs time to fetch data
async function Analytics() {
  const data = await fetchAnalytics(); // Slow API call
  return <AnalyticsChart data={data} />;
}

export default function DashboardPage() {
  return (
    <>
      <Header /> {/* Shows immediately */}
      <Suspense fallback={<div>Loading analytics...</div>}>
        <Analytics /> {/* Streams in when ready */}
      </Suspense>
    </>
  );
}

The page renders in this order:

Header appears instantly
Loading fallback shows for Analytics
Analytics component streams in when data is ready

4. Under the Hood: How Next.js Streaming Works

When you use streaming in Next.js, here's what happens:

Server-Side: Next.js starts rendering your page and immediately sends the static structure (layout, headers, navigation)
Suspense Detection: When React encounters a Suspense boundary with pending data, it pauses that component
Progressive Rendering: The server continues rendering other parts of the page while data fetches happen in parallel
Chunk Streaming: As data becomes available, Next.js streams HTML chunks to the browser
Client Hydration: React hydrates components as they arrive, making them interactive

This process uses HTTP streaming and React's concurrent features to deliver content as fast as possible.

5. Real-World Example: E-commerce Dashboard

Let's build a complex dashboard that demonstrates multiple streaming patterns:

// app/dashboard/page.tsx
import { Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";

export default function Dashboard() {
  return (
    <div className="dashboard">
      {/* Critical content loads first */}
      <Header />
      <Navigation />

      {/* Stream multiple components in parallel */}
      <div className="dashboard-grid">
        <ErrorBoundary fallback={<ErrorCard />}>
          <Suspense fallback={<MetricsSkeleton />}>
            <RealtimeMetrics />
          </Suspense>
        </ErrorBoundary>

        <ErrorBoundary fallback={<ErrorCard />}>
          <Suspense fallback={<ChartSkeleton />}>
            <SalesChart />
          </Suspense>
        </ErrorBoundary>

        <ErrorBoundary fallback={<ErrorCard />}>
          <Suspense fallback={<TableSkeleton />}>
            <RecentOrders />
          </Suspense>
        </ErrorBoundary>

        {/* Nested streaming for complex components */}
        <div className="inventory-section">
          <h2>Inventory</h2>
          <Suspense fallback={<InventorySkeleton />}>
            <InventoryOverview />
          </Suspense>
        </div>
      </div>
    </div>
  );
}

// Each component handles its own data fetching
async function RealtimeMetrics() {
  const metrics = await fetchMetrics(); // 500ms
  return <MetricsCards data={metrics} />;
}

async function SalesChart() {
  const sales = await fetchSalesData(); // 1.2s
  return <Chart data={sales} />;
}

async function RecentOrders() {
  const orders = await fetchRecentOrders(); // 800ms
  return <OrdersTable orders={orders} />;
}

async function InventoryOverview() {
  // Parent component fetches its own data first
  const inventory = await fetchInventoryData(); // 600ms

  return (
    <div>
      <h3>{inventory.title}</h3>
      <p>Total Items: {inventory.totalItems}</p>

      {/* Nested streaming within inventory */}
      <Suspense fallback={<div>Loading stock levels...</div>}>
        <StockLevels warehouseId={inventory.warehouseId} />
      </Suspense>

      <Suspense fallback={<div>Loading alerts...</div>}>
        <LowStockAlerts threshold={inventory.alertThreshold} />
      </Suspense>
    </div>
  );
}

async function StockLevels({ warehouseId }) {
  const levels = await fetchStockLevels(warehouseId); // 400ms
  return <StockChart data={levels} />;
}

async function LowStockAlerts({ threshold }) {
  const alerts = await fetchLowStockAlerts(threshold); // 300ms
  return <AlertsList alerts={alerts} />;
}

Loading sequence:

Header & Navigation appear instantly
All skeleton states show simultaneously
RealtimeMetrics loads first (500ms)
InventoryOverview loads next (600ms) → shows inventory summary + child loading states
RecentOrders loads next (800ms)
SalesChart loads last (1.2s)
StockLevels and LowStockAlerts stream independently (300-400ms after inventory loads)

6. Error Boundaries with Streaming

Combine error boundaries with Suspense when your components perform fallible operations (API calls, external dependencies):

// app/dashboard/error.tsx (Next.js built-in approach)
"use client";

export default function Error({ error, reset }) {
  return (
    <div className="error-card">
      <h3>Failed to load dashboard data</h3>
      <p>{error.message}</p>
      <button onClick={reset}>Retry</button>
    </div>
  );
}

For granular error handling:

// components/SafeStreamingComponent.tsx
"use client";

import { Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";

function DataErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div className="error-card">
      <h4>Failed to load data</h4>
      <p>{error.message}</p>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

export function SafeStreamingComponent({ children, fallback }) {
  return (
    <ErrorBoundary FallbackComponent={DataErrorFallback}>
      <Suspense fallback={fallback}>{children}</Suspense>
    </ErrorBoundary>
  );
}

Usage:

// Example async component that could fail
async function UserProfile({ userId }) {
  const user = await fetchUser(userId); // Could throw an error
  return <div>Welcome, {user.name}!</div>;
}

// Instead of writing this every time:
<ErrorBoundary FallbackComponent={DataErrorFallback}>
  <Suspense fallback={<div>Loading user data...</div>}>
    <UserProfile userId={123} />
  </Suspense>
</ErrorBoundary>

// You can just use:
<SafeStreamingComponent fallback={<div>Loading user data...</div>}>
  <UserProfile userId={123} />
</SafeStreamingComponent>

When to use each approach:

Next.js error.tsx: Route-level errors (entire page fails)
Custom ErrorBoundary: Component-level errors (specific parts fail)

Use error boundaries when components:

Fetch data from APIs
Use external libraries
Process user input
Could reasonably fail at runtime

Skip for simple code splitting:

// No error boundary needed - just lazy loading
<Suspense fallback={<div>Loading...</div>}>
  <LazyModalComponent />
</Suspense>

7. Performance Monitoring

Track streaming performance using the browser's built-in Web Performance API:

// utils/performance.ts
export function measureStreamingPerformance() {
  const navigation = performance.getEntriesByType("navigation")[0];
  const paintEntries = performance.getEntriesByType("paint");

  if (!navigation || typeof window === "undefined") return;

  // Measure Time to First Byte (TTFB)
  const ttfb = navigation.responseStart;

  // Measure First Contentful Paint
  const fcp = paintEntries.find(
    (entry) => entry.name === "first-contentful-paint"
  )?.startTime;

  console.log("TTFB:", Math.round(ttfb) + "ms");
  console.log("FCP:", Math.round(fcp || 0) + "ms");

  // LCP requires PerformanceObserver for accuracy
  if ("PerformanceObserver" in window) {
    new PerformanceObserver((list) => {
      const lcp = list.getEntries().at(-1)?.startTime;
      console.log("LCP:", Math.round(lcp || 0) + "ms");
    }).observe({ type: "largest-contentful-paint", buffered: true });
  }
}

// hooks/useStreamingPerformance.ts
"use client";

import { useEffect } from "react";
import { measureStreamingPerformance } from "@/utils/performance";

export function useStreamingPerformance() {
  useEffect(() => {
    measureStreamingPerformance();
  }, []);
}

Usage in components:

// components/PerformanceTracker.tsx
"use client";

import { useStreamingPerformance } from "@/hooks/useStreamingPerformance";

export function PerformanceTracker() {
  useStreamingPerformance();
  return null; // This component only tracks performance
}

// pages/dashboard.tsx
import { PerformanceTracker } from "@/components/PerformanceTracker";

export default function Dashboard() {
  return (
    <div>
      <PerformanceTracker />
      <Header />
      <Suspense fallback={<Loading />}>
        <StreamingContent />
      </Suspense>
    </div>
  );
}

What these metrics mean:

TTFB (Time to First Byte): How fast your server responds - measures streaming start
FCP (First Contentful Paint): When users first see content - critical for perceived performance
LCP (Largest Contentful Paint): When main content loads - Core Web Vital for SEO

Good streaming targets:

TTFB < 200ms (fast server response)
FCP - TTFB < 300ms (content streams quickly after server response)
Progressive LCP improvements (content loads in chunks, not all at once)

Chrome DevTools tips:

Network throttling: Click the "Network: No throttling" dropdown (visible in your screenshot) → Select "Slow 3G" to simulate slow connections and see streaming in action
Performance tab: Record page load to see when HTML chunks arrive:

Click "Record and reload" button
Look for multiple "Parse HTML" entries showing streaming chunks

Lighthouse: Run audit to measure streaming effectiveness:
- Go to Lighthouse tab → Click "Analyze page load"
- Check metrics like First Contentful Paint and Time to Interactive

8. When to Use Each Loading State

🦴 Skeleton Screens

Best for structured content like cards, tables, or lists (maintains layout and prevents content shift):

<div className="skeleton-card animate-pulse">
  <div className="h-4 bg-gray-200 rounded w-3/4" />
  <div className="h-4 bg-gray-200 rounded w-1/2 mt-2" />
</div>

🌀 Spinners

Good for quick actions or unknown content structure (when you can't predict the layout):

<div className="flex justify-center">
  <Spinner />
</div>

📝 Content Placeholders

Ideal for text-heavy areas (simple and lightweight for fast display):

<p className="text-gray-400">Loading article content...</p>

9. Best Practices

✅ DO:

Stream critical content first — Headers, navigation, above-the-fold content
Use skeleton screens — They maintain layout structure and prevent content shift
Keep fallbacks lightweight — They should load instantly
Test on slow connections — Use Chrome DevTools network throttling
Progressive enhancement — Show basic content first, enhance with streaming
Test with real data volumes — Large datasets affect streaming differently

❌ DON'T:

Over-stream — Too many loading states can be jarring
Block the entire page — Stream heavy components individually
Forget error boundaries — Always wrap streamed components in error boundaries
Skip performance monitoring — Measure streaming impact with real metrics
Use generic spinners everywhere — Be specific with loading states

10. Useful Links

Closing Thoughts

Streaming in Next.js isn't just a performance optimization — it's a UX philosophy. By showing users content progressively, you create experiences that feel instant and responsive.

Start simple with loading.tsx for route transitions, then add component-level streaming where it makes the most impact. Your users will notice the difference!

💡 Quick tip: Use the React DevTools Profiler to identify which components take longest to render — those are perfect candidates for streaming!

⚠️ Just a note
This article doesn’t claim to be exhaustive or perfect — if something seems off or outdated, feel free to dig deeper or let me know. Happy to hear from you :)

🙏 Thanks for reading!

If you found this article useful, feel free to share it or leave a like. And of course, if you have feedback or questions, don’t hesitate to reach out. Always happy to learn and connect! 🚀

Modern Web Development with Turborepo, Next.js, TailwindCSS, NestJS, and More…

BoopyKiki — Tue, 20 Aug 2024 13:19:05 +0000

NFT Marketplace

Introduction

Github Project

I started this project mainly for fun. So it’s not perfect! 😅 I wanted to learn and experiment with various tools like monorepo with Turborepo, Next.js, NestJS, Prisma, tailwindcss... So, I created a simple, fake, responsive application using this NFT Marketplace template from Anima. For the images I used DALL.E. I hope it can help or inspire anyone interested in these tools. Enjoy it! And let me know :)

Requirements

nodejs
pnpm (you can use another package manager, but pnpm is recommended. Personally, I use it for this project)
Yarn
npm

This is my configuration at the time of writing this README:

Node 22.1.0
pnpm 9.0.6
yarn 1.22.22
npm 10.7.0

If you don't know some tools used in this project, you can check the following links:

Package Manager

Which package manager do you want to use?

Turborepo doesn't handle installing packages, so you'll need to choose one of:

pnpm (Turborepo recommends pnpm)
Yarn
npm

Installation

$ git clone https://github.com/kiki-le-singe/nft-marketplace.git <name>
$ cd <name>

Warning If you use yarn or npm, you need to update the package.json file in the root of the project and use your version of yarn or npm:

{
  "packageManager": "yarn@1.22.22",
  "workspaces": ["apps/*", "packages/*"]
}

{
  "packageManager": "npm@10.7.0",
  "workspaces": ["apps/*", "packages/*"]
}

You must to replace all "workspace:*" by "*" inside the package.json files in the apps, packages and the root of the project. Indeed, only pnpm uses the workspace keyword.

When your package manager is set, you can go to the apps/api and add a .env file with the following content: DATABASE_URL="file:./dev.db"

Go to the root of the project and run the following command:

$ pnpm|yarn|npm install

Run

$ pnpm|yarn|npm dev (to run all the apps)

If you want to run the apps separately:

$ pnpm|yarn|npm dev --filter api (port 3002)
$ pnpm|yarn|npm dev --filter web (port 3000)
$ pnpm|yarn|npm dev --filter docs (port 3001)

Inside apps/api to see the database in the browser (port 5555):

$ npx prisma studio

For production:

$ pnpm|yarn|npm build

Then go to the root of apps/[api|docs|web] and run:

$ pnpm|yarn|npm start

Then open localhost:3002 for the api, localhost:3000 for the web and localhost:3001 for the docs if the web app is already running.

Be careful
If you have run this script pnpm|yarn|npm dev, the docs app could be running before the web app. In this case, the docs app will be on localhost:3000 and the web app on localhost:3001

API

For the api, there are some routes available:

localhost:3002 list some images served by the api.
localhost:3002/api the starting point of the api.
localhost:3002/api/creations/:id return the creation with the id 1.
localhost:3002/api/creations/explore return the creations to explore.
localhost:3002/api/categories return all the categories.
localhost:3002/api/categories/trending return the trending categories.
localhost:3002/api/users return all the users.

Features

Monorepo with Turborepo
Next.js for the web and docs apps:
- App Router (Features available in /app)
- SSR
- Data Fetching on the server side using streaming and Loading UI and Streaming
- Dynamic imports (Lazy Loading)[https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading]
- tailwindcss
- Responsive Design
- animations (hover, click, etc.)
- skeleton loading Adding loading skeletons
- Modal with Parallel and Intercepting Routes Parallel Routes: Modals Intercepting Routes: Modals
- Dark Mode
NestJS for the api app
Prisma for the database

[WIP] Features to come (maybe...)

authentification
improve the API
SEO (metadata, etc.)
i18n
a11y
tests (unit and e2e)
performance optimization (images, etc.)

Turborepo starter

This is an official starter Turborepo.

Using this example

Run the following command:

npx create-turbo@latest

What's inside?

This Turborepo includes the following packages/apps:

Apps and Packages

api: a NestJS app
docs: a Next.js app
web: another Next.js app
ui: a stub React component library shared by both web and docs applications
eslint-config-custom: eslint configurations (includes eslint-config-next and eslint-config-prettier)
tsconfig: tsconfig.jsons used throughout the monorepo

Each package/app is 100% TypeScript.

Utilities

This Turborepo has some additional tools already setup for you:

TypeScript for static type checking
ESLint for code linting
Prettier for code formatting

Build

To build all apps and packages, run the following command:

cd my-turborepo
pnpm build

Develop

To develop all apps and packages, run the following command:

cd my-turborepo
pnpm dev

Remote Caching

Turborepo can use a technique known as Remote Caching to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.

By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can create one, then enter the following commands:

cd my-turborepo
npx turbo login

This will authenticate the Turborepo CLI with your Vercel account.

Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:

npx turbo link

Useful Links

Learn more about the power of Turborepo:

ChatGPT from OpenAI with React Native

BoopyKiki — Mon, 17 Apr 2023 12:23:38 +0000

Introduction

I started this project "Tell me a story..." mainly to play with ChatGPT from OpenAI. It's a small app that allows you to write a story using the OpenAI API. There are some predefined stories to help your inspiration, and you can also write your own story.

The "Tell me a story..." project on GitHub

This app uses these following API:

Enjoy it! :)

This app has four screens:

A tutorial interface that introduces the app.
A simple screen that displays the users who have created pictures and illustrations.
The screen that allows you to write a predefined story.
The screen that allows you to write your own story.

Requirements

In order to use the API of ChatGPT, you have to create an account Explore the OpenAI API. After that, just create a new secret key API keys.

Installation

$ git clone https://github.com/kiki-le-singe/tell-me-a-story-ai.git <name>
$ cd <name>
$ yarn | npm install
$ npx pod-install

Create a .env file at the root of the project and set this env variable OPENAI_API_KEY=<YOUR_SECRET_KEY>

$ npm run ios

Resources

All the images are taken from Freepik. Those I have chosen have a free license. I just use them to illustrate this app.

They are designed by these authors:

All the icons are taken from unDraw.

A big thanks to them for their awesome work!

Mobile UI testing with React Native and Maestro

BoopyKiki — Fri, 24 Mar 2023 16:43:36 +0000

Hello!

This is a small personal project I mainly created for fun and to develop my mobile UI testing skills. I would like to share it with you, if you are interested in it. This project shows how to make UI testing with React Native (A framework to create native apps for Android and iOS) and Maestro (A mobile UI testing framework).

React Native Maestro

Thank you in advance for your time and input, and let me know if you have any questions.

I hope it would be helpful for someone :)

Have a good day!

Enjoy it! :)

DEV Community: BoopyKiki

EPUB Optimizer

Why Use EPUB Optimizer?

Table of Contents

About This Project

Quick Start

Features

Requirements

Installation

EPUBCheck Setup

Docker Alternative

Docker Requirements

Docker Installation

Docker Quick Start

Usage

Available Scripts

Modern Workflow

Command Line Options

Docker Usage

Project Structure

Development Information

Source and Build Separation

Import Structure

Testing

Development and Production

Linting and Formatting

Minification

Modular Fix Scripts

Customizing the Optimization Process

Common Issues

Docker Issues

Traditional Installation Issues

File Issues

Troubleshooting

Dependencies

System Requirements

Key npm Packages

Development Dependencies

License

Optimize Next.js Performance with Smart Code Splitting: What to Load, When, and Why

See Demos in Action

Table of Contents

1. Why Code Splitting Matters

2. Static vs Dynamic Imports

3. When Might You Use Dynamic Imports?

4. Example: Dynamic Modal

5. Dynamic Tabs

6. Dynamically Load Heavy External Libraries

🗺️ Example 1: Display a Map with leaflet

🎶 Example 2: Play an mp3 with wavesurfer

🗺️ Example 3: Display charts with charts.js

🚀 Conclusion

7. Does Next.js Split Code by Page Automatically?

8. Disabling SSR with next/dynamic

9. Key Points to Remember

Useful Links

A Complete Next.js Streaming Guide: loading.tsx, Suspense, and Performance

See Demos in Action

Table of Contents

1. What is Streaming?

2. Why Does It Matter?

3. How Streaming Works in Next.js

Page-Level Streaming with loading.tsx

Component-Level Streaming with <Suspense>

4. Under the Hood: How Next.js Streaming Works

5. Real-World Example: E-commerce Dashboard

6. Error Boundaries with Streaming

7. Performance Monitoring

8. When to Use Each Loading State

🦴 Skeleton Screens

🌀 Spinners

📝 Content Placeholders

9. Best Practices

✅ DO:

❌ DON'T:

10. Useful Links

Closing Thoughts

Modern Web Development with Turborepo, Next.js, TailwindCSS, NestJS, and More…

NFT Marketplace

Introduction

🗺️ Example 1: Display a Map with `leaflet`

🎶 Example 2: Play an mp3 with `wavesurfer`

🗺️ Example 3: Display charts with `charts.js`

8. Disabling SSR with `next/dynamic`

Page-Level Streaming with `loading.tsx`

Component-Level Streaming with `<Suspense>`