Skip to content

News

Next.js verstehen: Struktur und Architektur (Teil 4 von 5)

Das groĂźe Ganze

Sie haben TypeScript (Teil 2) und React Components (Teil 3) gelernt. Jetzt lassen Sie uns verstehen, wie Next.js alles zu einem vollständigen Application Framework zusammenbringt.

Denken Sie an Next.js als das Äquivalent zu Delphis Projektstruktur, Runtime Library und Deployment Tools - alles kombiniert. Es ist nicht nur eine Library - es ist ein vollständiges Framework für das Erstellen von Web-Anwendungen.

Warum Next.js zusätzlich zu React?

React ist eine UI Library - sie hilft Ihnen beim Erstellen von Komponenten. Aber eine echte Anwendung braucht mehr:

  • Routing (Navigation zwischen Seiten)
  • Data Fetching (Laden von Informationen aus Datenbanken)
  • API Endpoints (Backend Logic)
  • Deployment und Optimierung

Next.js stellt all das zur VerfĂĽgung. Es ist wie der Unterschied zwischen nur der VCL versus der kompletten Delphi IDE und Runtime.

Understanding Next.js: Structure and Architecture (Part 4 of 5)

The Big Picture

You've learned TypeScript (Part 2) and React components (Part 3). Now let's understand how Next.js brings it all together into a complete application framework.

Think of Next.js as the equivalent of Delphi's project structure, runtime library, and deployment tools all combined. It's not just a library—it's a complete framework for building web applications.

Why Next.js on Top of React?

React is a UI library—it helps you build components. But a real application needs more:

  • Routing (navigating between pages)
  • Data fetching (loading information from databases)
  • API endpoints (backend logic)
  • Deployment and optimization

Next.js provides all of this. It's like the difference between having just the VCL versus having the complete Delphi IDE and runtime.

Visualizing Your Git History - The Power of GitKraken's Graph View

Image of the GitKraken graph view showcasing a complex repository structure

Why Visual Git Matters for Modern Development

As developers, we spend countless hours navigating our repositories, understanding branching strategies, and coordinating merges. Yet traditional command-line Git tools force us to build mental models of our repository structure from text-based outputs. GitKraken's graph view changes this paradigm entirely, transforming Git history from an abstract concept into a tangible, visual experience.

React Components: Das Web UI Model verstehen (Teil 3 von 5)

Der konzeptionelle Wandel

Erinnern Sie sich an das erste Mal, als Sie verstanden haben, wie Delphis Komponentenmodell funktionierte? Sie konnten einen TButton auf ein Form ziehen, seine Properties setzen, einen OnClick Handler schreiben, und plötzlich hatten Sie ein funktionierendes User Interface. Komponenten waren wiederverwendbar. Sie konnten eigene Komponenten erstellen und sie überall verwenden. Die VCL machte Desktop-Entwicklung intuitiv.

React ist dieselbe Idee für Web-Anwendungen. Anstatt Desktop Controls haben Sie Web Components. Anstatt Forms haben Sie Pages. Aber das fundamentale Konzept—Interfaces aus zusammensetzbaren, wiederverwendbaren Teilen zu erstellen—ist identisch.

Dieser Artikel handelt nicht davon, Ihnen beizubringen, React Code zu schreiben. Es geht darum, Ihnen zu helfen, das mentale Model zu verstehen, damit Sie bewerten können, ob Ihre Delphi-Anwendungen zu diesem Ansatz übertragen werden können.

React Components: Understanding the Web UI Model (Part 3 of 5)

The Conceptual Shift

Remember the first time you understood how Delphi's component model worked? You could drop a TButton on a form, set its properties, write an OnClick handler, and suddenly you had a working interface. Components were reusable. You could build custom components and use them everywhere. The VCL made desktop development intuitive.

React is the same idea for web applications. Instead of desktop controls, you have web components. Instead of forms, you have pages. But the fundamental concept—building interfaces from composable, reusable pieces—is identical.

This article isn't about teaching you to write React code. It's about helping you understand the mental model so you can evaluate whether your Delphi applications can translate to this approach.

TypeScript fĂĽr Delphi-Entwickler: Die Grundlagen verstehen (Teil 2 von 5)

Willkommen zurĂĽck

In Teil 1 haben wir besprochen, warum der Übergang von Delphi zu Next.js geschäftlich Sinn macht. Jetzt erkunden wir TypeScript selbst und warum es sich überraschend vertraut für Delphi-Entwickler anfühlt.

Denken Sie daran: Diese Serie handelt nicht davon, Ihnen beizubringen, TypeScript zu programmieren. Es geht darum, Ihnen zu zeigen, dass die Konzepte, die Sie in Delphi gemeistert haben, direkt übertragbar sind, und dass die Lernkurve kürzer ist, als Sie befürchten mögen.

TypeScript for Delphi Developers: Understanding the Fundamentals (Part 2 of 5)

Welcome Back

In Part 1, we discussed why the transition from Delphi to Next.js makes business sense. Now, let's explore TypeScript itself and why it feels surprisingly familiar to Delphi developers.

Remember: this series isn't about teaching you to code TypeScript. It's about showing you that the concepts you've mastered in Delphi translate directly, and that the learning curve is shorter than you might fear.

Erweitern Sie Ihr Delphi Know-how: Die TypeScript Chance (Teil 1 von 5)

Nach 30 Jahren Delphi-Entwicklung hätte ich nie gedacht, dass ich das schreiben würde. Aber hier sind wir, und ich muss mitteilen, warum das Verstehen von TypeScript, React und Next.js möglicherweise die wichtigste Geschäftsentscheidung ist, die Sie in diesem Jahr treffen.

Warum diese Serie existiert

Lassen Sie mich von vornherein klarstellen: Delphi ist immer noch phänomenal. Für Windows Desktop-Anwendungen und datenbankintensive Enterprise-Software bleibt es eine der produktivsten Umgebungen, die je geschaffen wurden. Die VCL ist erprobt, die Database-Komponenten sind unübertroffen, und die Compile-Zeiten sind blitzschnell.

Aber die Welt hat sich verändert. Ihre Kunden fragen nach Web-Anwendungen. Sie wollen auf ihre Systeme von iPads, Chromebooks und Smartphones zugreifen. Sie wollen Anwendungen, die keine Installation erfordern. Sie wollen moderne Benutzeroberflächen, die aussehen wie die Apps, die sie täglich verwenden. Und ehrlich gesagt? Echte Cross-Platform Web-Anwendungen mit Next.js zu erstellen ist nicht nur effizienter – es ist dramatisch kosteneffektiver, als zu versuchen, Delphi für das Web funktionieren zu lassen.

Expanding Your Delphi Expertise: The TypeScript Opportunity (Part 1 of 5)

After 30 years of Delphi development, I never thought I'd write this. But here we are, and I need to share why understanding TypeScript, React, and Next.js might be the most important business decision you make this year.

Why This Series Exists

Let me be clear upfront: Delphi is still phenomenal. For Windows desktop applications and database-heavy enterprise software, it remains one of the most productive environments ever created. The VCL is battle-tested, the database components are unmatched, and the compile times are lightning fast.

But the world has changed. Your clients are asking for web applications. They want to access their systems from iPads, Chromebooks, and smartphones. They want applications that don't require installation. They want modern interfaces that look like the apps they use every day. And honestly? Building true cross-platform web applications with Next.js is not just more efficient—it's dramatically more cost-effective than trying to make Delphi work for the web.

🚀 The AI Productivity Paradox: Why You Shouldn’t Miss GitKraken’s Upcoming Webinar

The Big Question: Is AI Actually Making Us More Productive?

If you're a developer — whether you’re crafting web apps in TypeScript or maintaining enterprise systems in Delphi — you've probably felt it by now: AI is everywhere in our workflows.

Autocompletion, refactoring suggestions, code explanations, even full unit tests generated by AI — the tools are amazing.
But are they genuinely making us faster and better developers, or just busier ones?

That’s the question keeping engineering leaders awake at night. And that’s the topic GitKraken is tackling head-on in their upcoming event:

👉 Join the GitKraken Insights Webinar on October 29

Why You Need to Switch to Delphi 13 and its 64-bit IDE Yesterday

For most Delphi developers, the switch to 64-bit isn’t obvious at first glance. After all, for decades since Delphi 2, we’ve been working quite happily in a 32‑bit IDE, building applications, connecting to databases, and delivering production software.

With the introduction of 64‑bit compilers for Windows and other platforms, the natural assumption was:

“As long as I can compile 64‑bit executables from the 32‑bit IDE, I’m fine— right?”

Not quite. Let’s talk about why sticking to the 32‑bit IDE is holding you back, and why the time to switch is right now.

Better-Auth taking over management of Auth.js

I’ve tried a lot of authentication frameworks for React and Next.js in the last year. I wanted something that just works, is secure, and lets me move fast without wrestling with OAuth flows or rolling my own session handling.

For a long time I liked Auth.js (formerly NextAuth.js). It solved many problems out of the box and made it possible to own auth without spending months on integrations. But there were a couple of things that held me back when starting new projects: progress on the project sometimes felt slow to my eyes, and the getting-started documentation could be tricky to follow when you were just learning the library.

Then I learned about Better-Auth — and honestly, I never looked back. Better-Auth felt clearer, more opinionated where it needed to be, and focused on the primitives teams actually reuse. It removed the friction I had with Auth.js when building new apps.

The big news

Last week, there’s been some news that validates that move and makes the ecosystem healthier: Auth.js is now maintained and overseen by the Better-Auth team.

Vercel Web Interface Guidelines

Vercel, the company behind the popular Next.js framework, has published a comprehensive set of Web Interface Guidelines. These guidelines provide best practices and recommendations for building modern web applications using Next.js and other web technologies.

They also included their customizations which are specific to Vercel.

Following comprehensive interface guidelines like these is crucial for creating web applications that truly serve their users. Poor user experience design can make even the most powerful applications frustrating and inaccessible, leading to user abandonment and business failure. These guidelines address fundamental UX principles such as accessibility, performance, and intuitive interaction patterns that directly impact user satisfaction and engagement.

Modern web development extends far beyond just making things work—it's about creating experiences that feel natural, inclusive, and delightful across all devices and user capabilities. By adhering to established patterns for keyboard navigation, focus management, loading states, and responsive design, developers can ensure their applications work seamlessly for users with disabilities, on slow networks, and across the diverse landscape of modern devices. This attention to detail not only improves user retention but also enhances SEO performance and reduces support costs.

Key Areas Covered

The guidelines focus on several critical aspects of web interface development:

  • Interactions: Keyboard accessibility, focus management, mobile input optimization, and loading states
  • Animations: Performance-optimized motion with proper easing and reduced-motion support
  • Layout: Responsive design, optical alignment, and safe area considerations
  • Content: Accessible typography, proper state handling, and internationalization
  • Forms: Input validation, autocomplete integration, and submission handling
  • Performance: Rendering optimization, network budgets, and image loading strategies
  • Design: Color contrast, shadows, and visual consistency

Vercel-Specific Customizations

Vercel has also included their own brand-specific preferences, particularly around copywriting standards. They emphasize active voice, action-oriented language, consistent terminology, and positive framing of error messages. Their approach prioritizes clarity and conciseness while maintaining encouraging, problem-solving communication even in failure scenarios.

Need help?

Looking to migrate your desktop Delphi applications to modern web technologies? I specialize in helping developers transition from traditional desktop development to web-based solutions using TMS WEB Core, React, or Next.js. Whether you're modernizing legacy VCL applications or building entirely new web interfaces, I can guide you through the process and ensure your applications follow current best practices. You can contact me via my website.

FlexCel is the perfect report generator for any frontend

FlexCel is a powerful library for creating and manipulating Excel files in Delphi and .NET applications. You can export to many image formats as well as PDF files.

The product allows you to create templates in Excel, which makes it easy to design and format reports. You can use all the features of Excel, such as formulas, charts, and conditional formatting. Then, in your backend, you can use FlexCel to populate the templates with data from your database or other sources.

It is currently distributed by TMS Software, a well-known company in the Delphi community. You can find more information about FlexCel on their website. As said, it is available for both Delphi and .NET, so you can use it in various types of applications.

However, this is a major understatement. FlexCel is not just a tool to create Excel files. It is a comprehensive solution for generating reports in various formats, including PDF, images (PNG, JPEG, BMP, GIF, TIFF), and even HTML.

I have been using FlexCel for Delphi and .NET for many years. It is a fantastic library for generating Excel and PDF reports from templates. I have used it in various projects, from small desktop applications to large web services. In my books you can find real-world examples of how to use FlexCel in Delphi applications to create reports. In my latest book about Modern Delphi Application development, I have a whole chapter dedicated to FlexCel and reporting as well as in my book about creating Web Services with XData.

Another Use Case

Recently, I have been working on a Next.js project that required generating complex reports that users had to download as PDF files. I decided to use FlexCel for .NET in the backend, and it worked like a charm. I had two alternatives implementing the backend:

  • Using Delphi with WebBroker or RAD Server
  • Using Delphi with XData

Both these alternatives would have worked, but I decided to go with ASP.NET Core because I wanted to explore the .NET ecosystem as Microsoft has recently made great improvements with .NET Core to compile for any platform, including Linux and macOS. Also, ASP.NET Core Minimal APIs are very easy to use and get started with.

Deployment Scenario

Deployment is very easy. I picked Linux as the operating system to save costs on hosting. A server that is capable of hosting a Linux ASP.NET Core application is much cheaper than a Windows server. The same is obviously true if you want to host a Delphi application on Windows. Thankfully, Delphi comes with a Linux compiler and both XData and FlexCel support Linux.

To isolate the reporting service from the outside world and only to expose the Web Application, I created a Docker Compose setup with two containers:

  • One container for the Next.js frontend
  • One container for the ASP.NET Core backend

The two containers communicate via a private network. The Next.js application calls the ASP.NET Core backend to generate the reports. The backend uses FlexCel to create the reports and returns them to the frontend, which then serves them to the user.

The Web Application is accessible via HTTPS, and the backend is only accessible from the frontend container. This setup ensures that the backend is not exposed to the internet, which adds an extra layer of security.

Conclusion

FlexCel is a fantastic library for generating reports in various formats. It is easy to use and integrates well with both Delphi and .NET applications. If you need to generate reports in your application, I highly recommend giving FlexCel a try. You can find more information about FlexCel on the TMS Software website.

Need help?

If you need help with FlexCel, Delphi, .NET, or anything else related to software development, feel free to reach out to me. I offer consulting and training services and would be happy to assist you with your project. You can contact me via my website.