pages in next.js

Introduction

Next.js contains a feature called as Pages that helps us to maintain a clear isolation of the page level components and their layouts.

This helps us in having page and routing implementations separate from the components, helping in isolation of the application layout / presentation with that of the functional components

This segregation helps us in having slim components and isolate the layout / page level actions. Also, since there are pages, the components that comprise a page atleast at the higher level can be easily found out in this system.

Problem Statement

We have been using react.js for building SPA (Single Page Applications) for a while and we experienced that some features like pages and routing are not very comfortable with react.js

Compared with other frameworks, react does not have option to fully perform the routing and having pages. There are times where we have to duplicate the layouts to all components that act like pages in the react application.

These are resulting in lots of code getting redundant and duplicated across various components in react.js application.

Solution

Pages are configured in a Next.js application and the directory structure looks like the one below

Application Root

> components

> pages

> aboutus

> contact

> products

> index.js (this normally is the entry point file in the page, this typically will invoke the list of products through its component)

> [productId].js (this filename contains the route parameter as a placeholder in the filename itself thereby visually expressing that this file needs a URL Query parameter. In our example, this productId is the id of the product and this page will have components that will render the details of a product.)

This file system organization helps us in the following,

1. Clear separation of what goes in a page

2. Visual indication in the file name itself of what a file is responsible for and also what the parameters the component requires

3. The pages are also react.js components, so that there is no extra effort to learn / implement the pages features

I will share sample application on features of Next.js in subsequent blog posts.

Comments

User Authentication schemes in a Multi-Tenant SaaS Application

User Authentication in Multi-Tenant SaaS Apps Introduction We will cover few scenarios that we can follow to perform the user authentication in a Multi-Tenant SaaS application. Scenario 1 - Global Users Authentication with Tenancy and Tenant forwarding In this scheme, we have the SaaS Provider Authentication gateway that takes care of Authentication of the users by performing the following steps Tenant Identification User Authentication User Authorization Forwarding the user to the tenant application / tenant pages in the SaaS App This demands that the SaaS provider authentication gateway be a scalable microservice that can take care of the load across all tenants. The database partitioning (horizontal or other means) is left upto the SaaS provider Service. Scenario 2 - Global Tenant Identification and User Authentication forwarding In the above scenario, the tenant identification happens on part of the SaaS provider Tenant Identification gateway. Post which, the

SFTP and File Upload in SFTP using C# and Tamir. SShSharp

The right choice of SFTP Server for Windows OS Follow the following steps, 1. Download the server version from here . The application is here 2. Provide the Username, password and root path, i.e. the ftp destination. 3. The screen shot is given below for reference. 4. Now download the CoreFTP client from this link 5. The client settings will be as in this screen shot: 6. Now the code to upload files via SFTP will be as follows. //ip of the local machine and the username and password along with the file to be uploaded via SFTP. FileUploadUsingSftp("172.24.120.87", "ftpserveruser", "123456", @"D:\", @"Web.config"); private static void FileUploadUsingSftp(string FtpAddress, string FtpUserName, string FtpPassword, string FilePath, string FileName) { Sftp sftp = null; try { // Create instance for Sftp to upload given files using given credentials sf

Download CSV file using JavaScript fetch API

Downloading a CSV File from an API Using JavaScript Fetch API: A Step-by-Step Guide Introduction: Downloading files from an API is a common task in web development. This article walks you through the process of downloading a CSV file from an API using the Fetch API in JavaScript. We'll cover the basics of making API requests and handling file downloads, complete with a sample code snippet. Prerequisites: Ensure you have a basic understanding of JavaScript and web APIs. No additional libraries are required for this tutorial. Step 1: Creating the HTML Structure: Start by creating a simple HTML structure that includes a button to initiate the file download. <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > CSV File Download </ title > </ head > < body >

Implementing Row Level Security [RLS] for a Multi-Tenant SaaS Application

Row Level Security The need for row level security stems from the demand for fine-grained security to the data. As the applications are generating vast amounts of data by the day. Application developers are in need of making sure that the data is accessible to the right audience based on the right access level settings. Even today, whenever an application was built, the application development team used to spend a lot of time researching the approach, implementing multiple tables multiple logics 25 queries to add filters to manage the data security for every query that gets transferred from the end user request to the application database. This approach requires a lot of thought process, testing and security review because the queries needs to be intercepted, updated and the data retrieval to be validated to make sure the end-users see only the data that they are entitled to. Implementation With the advent of of row level security feature being rolled out in main d

Async implementation in Blazor

Step-by-Step Guide to Achieving Async Flows in Blazor: 1. Understanding Asynchronous Programming: Before delving into Blazor-specific async flows, it's crucial to understand asynchronous programming concepts like async and await . Asynchronous operations help improve the responsiveness of your UI by not blocking the main thread. 2. Blazor Component Lifecycle: Blazor components have their lifecycle methods. The OnInitializedAsync , OnParametersSetAsync , and OnAfterRenderAsync methods allow you to implement asynchronous operations during various stages of a component's lifecycle. 3. Asynchronous API Calls: Performing asynchronous API calls is a common scenario in web applications. You can use HttpClient to make HTTP requests asynchronously. For example, fetching data from a remote server: @page "/fetchdata" @inject HttpClient Http @ if (forecasts == null ) { <p> < em > Loading... </ em > </ p > } else { <table>

Software And Architecture

Search This Blog