ClassicReader.org is a 1,450-page statically generated site for reading classic literature in the browser.

Motivation

There are plenty of websites where you can read classic books for free. However, I haven't found any that offer a pleasant reading experience.

The internet is an incredible and openly documented technology, but people often use it for aggressive marketing, user manipulation, and privacy invasion.

I wanted to make a genuinely lovely project with a wholesome purpose. As anyone can edit the books on GitHub, it has a community aspect, too.

Also, I find static site generation inherently satisfying. So, I wanted to make a site with at least 1,000 pages as an arbitrary personal goal, all while demonstrating the power of Next.js to create a high-performance search engine-optimised site.

Technology

• **Next.js, app router** - 1,450 statically generated pages using `generateStaticParams`. Here's a fantastic introduction to Next.js(opens in a new tab) if you're unfamiliar with this incredible framework

• **Tailwind CSS**

• Simple Analytics(opens in a new tab) - Privacy-first data collection that doesn't use cookies, provides valuable data insights without invading anyone's privacy, and doesn't require a cookie consent banner

• epub(opens in a new tab) Node package - I can add a new novel in about 90 seconds. I simply add the title and writer information to my as const enums, run my parsing script(opens in a new tab), then delete any 'chapters' that are just copyright information or dedications

• **Deployed with Vercel**

Features

• **Excellent reading experience**
• **Responsive design**

• **Optimised for search engines** - Each chapter page has an expressive URL with all the details, including the chapter name, if there is one: classicreader.org/writers/george-eliot/novels/middlemarch/chapter-1(opens in a new tab) or classicreader.org/writers/lucy-maud-montgomery/novels/anne-of-green-gables/chapter-1-mrs-rachel-lynde-is-surprised(opens in a new tab)

• **Perfect Lighthouse scores** - Exceptional largest contentful paint of 0.6 seconds with no cumulative layout shift

Challenges

Bundle size & deployment

I initially created a local storage system so that users could track their progress - it would mark a chapter as read after pressing the next chapter button. The novel overview page allowed users to manage the overall progress.

It was quite an elegant solution; however, it made the statically generated site huge - around 5GB - and would have required a custom hosting solution, as the three platforms I have used most - Fly.io, Vercel and Hostinger - don't allow sites of this size without custom support.

Solution

I decided to scrap the book progress system, as content library size and SEO are more important for this project.

Also, I'm not even sure that anyone would have used the feature, and it's easy enough to bookmark the URL and keep replacing it as you read.

Navigation design

Initially, I wanted to lay the page like a traditional book, with the title and chapter in all caps at the top.

However, I recently read three books - Universal Principles of UX(opens in a new tab), Letting Go of the Words(opens in a new tab), and Building a Story Brand(opens in a new tab) - that all stressed the importance of straightforward navigation, albeit from different angles.

100 Universal UX Principals also emphasises that many users never see the homepage, so it's vital that every page on the site explains the information architecture clearly.

Solution

Instead of my print-inspired menu idea, I went for breadcrumbs, which act as a "You are here" marker and navigation system while remaining minimal, elegant and unobtrusive.

Reception

The site has been a success, getting surprising traffic already - currently over 500 page views per day after going live only a week ago.

It's hard to say what's driving the traffic. However, it's probably a combination of all these:

• Content that people love
• Optimised metadata
• Descriptive URLs
• Great UX

Almost everyone I've shown the site has said they love the font; however, it's just the system font. I suspect that people are actually enjoying these instead:

• Generous line height
• Restricted print width

These design aspects significantly enhance readability while operating on a less conscious level, allowing the more recognisable element - the font - to receive all the credit.

Plans for the future

• Add more literature
• Add support for poems and plays
• Get to 10,000 pages by the end of 2025

Conclusion

Developing ClassicReader has been immensely satisfying and demonstrates the power of static generation, even though it hardly scratches the surface of what Next.js can do.

I've achieved everything I set out to do:

• Enabled a pleasant browser-based reading experience
• Achieved perfect Lighthouse scores
• Created 1,000+ static pages

I'm delighted with how this project has turned out and look forward to nurturing and expanding it.