Category: Web Programming

#02 – Data Fetching – Learn Next.js

Next.js provides three functions to fetch data for pre-rendered pages: getStaticProps(): Used for static generation (pre-rendering technique)Fetches data at build-timeWhen an async function getStaticProps() is called from the page component, the next.js will pre-render this page at build time using the props returned by that function (see Examples)The context parameter used as an argument of getStaticProps() function is an object containing following parameters (see details here):paramspreviewpreviewDatalocalelocalsdefaultLocalegetStaticProps() function returns an object with following parameters (see details here):props (required)revalidatenotFoundredirectImports used inside the getStaticProps() function are not bundled for the client sideServer side code can be written inside the getStaticProps() function e.g. to...
forward

#01 Introduction – Learn Next.js

Next.js is a framework used to develop production ready React applications. Next.js provides many useful features e.g. pre-rendering, smart bundling, dynamic file-based routing, route pre-fetching and many more. In this blog post, we have discussed the prerequisites, how to create next.js application, next.js pages, and pre-rendering techniques.

forward

NPM Commands Not Working in Integrated Terminal of VSCode

Visual Studio Code (VSCode) provides an integrated terminal to run commands inside the current directory. Recently, I installed VSCode and tried to run the NPM commands and it shows following errors:

forward

Common PHP Warnings/ Errors and their Solutions

Recently, we have updated our PHP version to the latest stable version (7.4.9) for our WordPress website. After the update we started getting PHP warnings. We have listed some of the warnings with their possible solutions in this blog post.

forward

Get Started with Redux in React Application

npm install --save react-redux @reduxjs/toolkit Create a file src/store/index.js and add following code in it: import { configureStore } from '@reduxjs/toolkit'; import { combineReducers } from 'redux'; const reducer = combineReducers({ // here we will be adding reducers }) const store = configureStore({ reducer, }) export default store; To link our app with the redux store update the main app file as follows: ... ... import { Provider } from 'react-redux'; import store from './store'; ReactDOM.render( <Provider store={store}> <App /> </Provider> , document.getElementById('root') );...
forward

Server Side Pagination Using NodeJS, MongoDB and Angular Material Tables

Normally, we use Angular Material's data tables with pagination (mat-paginator) to list the results. This is not an efficient and optimal approach particularly if there are lots of records to show in the table. Angular Material's pagination just divides the received records into the paginated records. So, if we need to display lots of records in data tables, then the efficient and optimal approach is to use Server Side Pagination. Following, sections will demonstrate the server-side pagination using NodeJS (API), MongoDB (database), and Angular Material data tables. API using NodeJS and MongoDB Following is a sample code, written in NodeJS...
forward