Boost Development Efficiency with Next.js, AMP, and Preact: A Full‑Stack Case Study

Why AMP?

Google AMP emphasizes user experience over developer convenience, often making development cumbersome. Webnovel's early AMP projects showed performance gains but suffered from poor developer experience.

Ficool m Site

Ficool is Webnovel's new product for African users, packaged as a lightweight Android Go app via Google TWA, facing strict memory and CPU constraints and limited network bandwidth.

Next.js + AMP + Preact

To address the challenges, the team set three goals: improve development efficiency, ensure high maintainability, and use mainstream technologies to ease developer workload.

The chosen stack—Next.js, AMP, and Preact—offers a modern React‑based workflow while staying within AMP's constraints.

From HTML "Hard‑coding" to React

Previously, AMP pages were built by directly embedding AMP components in static HTML, which was inflexible. Next.js (v8.1+) supports AMP, allowing React to render AMP pages.

Component Extraction

Using React, components like amp-list can be wrapped with fallback and placeholder features, making them more reusable.

Old HTML templates struggled to extract amp-list due to differing templating syntaxes; React solves this.

Styling

Earlier, CSS had to be inlined via style amp-custom with complex build steps. The new workflow adds sass-loader and Next.js's built‑in styled-jsx , automatically inlining compiled CSS.

AMP Pages with amp‑script

amp‑script enables custom JavaScript in AMP, but imposes size (150 KB uncompressed) and API limits. React's bundle (~110 KB) leaves insufficient space, so the lightweight Preact (~8.2 KB) was chosen.

Webpack for amp‑script

amp‑script requires a single bundled script referenced via src . A dedicated webpack.amp.config handles dependency analysis and Babel transpilation to ES5.

Custom webpack plugin for CSP hash

The plugin generates a hash code for the compiled amp‑script and writes it to a hash.txt file. The AMP page then includes this hash in a meta tag to satisfy CSP requirements.

Cross‑origin handling

When the amp‑script is served from a CDN, a CSP hash must be added to the page. The workflow automates this by injecting the generated hash via raw‑loader in next.config.js .

Design Principles and Best Practices

AMP’s core principle is to do only what benefits user experience. Developers should keep responsibilities clear, place heavy logic on the backend when possible, and avoid features that degrade performance.

Use AMP components (e.g., amp-carousel ) instead of custom heavy scripts.

Leverage server‑side rendering for data‑intensive pages.

Conclusion

The Next.js + AMP + Preact stack enabled the Ficool m‑site to achieve high performance on low‑bandwidth networks while dramatically improving developer productivity. The detailed webpack and amp‑script configurations provide a reusable blueprint for similar projects.

References

[1] About AMP work at Webnovel: https://juejin.im/post/5cda5b146fb9a0321557028b [2] No poser, no internet, no support: How AMP bridges the app gap in Iraq and other war‑impacked region: https://www.youtube.com/watch?v=BrDBsS1Sko0&feature=youtu.be [3] API limits: https://github.com/ampproject/worker-dom/blob/master/web_compat_table.md [4] amp‑script limitations: https://github.com/ampproject/worker-dom/blob/master/web_compat_table.md [5] AMP core mindset: https://www.youtube.com/watch?v=7NctKsDrlt0 [6] amp‑carousel component: https://amp.dev/documentation/components/amp-carousel/?format=websites