Posts

Showing posts with the label nextjs

Process of applying TDD to a NextJS project

Image
Introduction Test-Driven Development (TDD) is an advanced software development methodology where tests are written before the actual source code is implemented. This process operates in a repetitive cycle: Red (Write a failing test) -> Green (Write the minimum source code to make the test pass) -> Refactor (Optimize the code structure). Advantages : Improve source code quality: Minimize potential bugs right from the initial development phase. Better system design: Thinking about testing first helps you build highly modular, loosely coupled and easy-to-maintain modules. Confident Refactoring: You can comfortably improve and optimize code without fear of breaking existing features, thanks to the automated test system protection. Living documentation: Test cases act as precise specification documentation, helping team members clearly understand how the system operates. Reduce Debugging Time : TDD helps detect errors right at the moment "just finished typing". The c...

Using GraphQL Effectively with NextJS and NestJS

Image
Introduction GraphQL is a powerful query language for APIs which optimizes performance by allowing the client side to accurately define the required data structure, completely overcoming the over-fetching and under-fetching disadvantages of traditional REST APIs. In this article we will set up the connection environment as follows: Client connects to NextJS server which acts as a middleware to forward the GraphQL payload to NestJS. You will see that most of the implementation on NestJS will be quite simple and most of the content is auto-generated code via prisma-nestjs-graphql. It is suitable for projects that have complex processing requirements concentrated on the frontend and applying GraphQL will bring high flexibility in querying data so that the team can focus on building features for the frontend effectively. Prerequisites Please take a look at this article where I have specific instructions on setting up GraphQL for NextJS, here on the FE side we will use @tanstack/react-query...