Netlify provides global scale platfom for web projects without any server, devops and infrastructure setup. It has a good support deploy static and dynamic site and you can start your project for free. Deploying Static Site generated by Next.js Add following to the scripts in package.json . "start": "next start", "build": "next build", "export": "next export" Create netlify.toml file under root folder and add following commands. [build] command = "npm run build && npm run export" publish = "out" That's it. Go to netlify.com and follow instruction on setting up project with github repository. Depoying server-rendered React Apps generated by Next.js Netlify follows serverless architecture. It has the concept of Functions. You need to add little extra steps. Add next-on-netlify library to your project with npm i next-on-netlify command. Add following to the scripts in p

In the previous post , We created a BlogPost application rendering content on server-side with Next.js . We will be changing the same application to use SSG (Static Generation) capability of Next.js. What will we create and which Next.js functions will we use? We will create an application which will have index page to list all the available blog links and statically generated blog posts. We will use getStaticProps and getStaticPaths functions from Next.js. getStaticProps function is called by Next.js at build time and pre-renders the page. getStaticPaths function is also called by Next.js at build time. If you are using getStaticProps and there are dynamic paths then you define those in getStaticPaths Update index.tsx import React from 'react'; import { GetStaticProps, GetStaticPropsContext } from 'next'; import BloggerService from '../service/BloggerService'; import styles from '../App.module.css' /* Line 1*/ interface IndexPageProps { bl

In the previous post , we created a BlogPost application with React and Redux and managed global state with Redux. We will extend the same application and will introduce Next.js for server-side rendering. The bigger benefit of using Next.js is pre-rendering of the page along with automatic code-splitting, static site export, CSS-in-JS. Next.js functions Next.js exposes three functions for data fetching and these are getStaticProps , getStaticPaths and getServerSideProps . First two functions are used for Static generation and the last function getServerSideProps is used for Server-side rendering. Static generation means the HTML is generated at the build(project build) time whereas in Server-side rendering HTML is generated at each request. Adding required libraries Run npm i --save next @types/next from root of the project to add the required libraries for this example. Update following commands under scripts in package.json. "dev": "next dev", "star

In the previous post , we created a blog post application with React and managed local state with useState hook. We will extend the same application and will introduce Redux and react-redux library for state management and @reduxjs/toolkit for opinionating setting up the redux store and creating selector function on state. Adding required libraries Run npm i --save @reduxjs/toolkit react-redux @types/react-redux from root of the project to add required set of libraries for this post. Which new functions we will be using in this example? configureStore from @reduxjs/toolkit createSlice from @reduxjs/toolkit useDispatch from react-redux useSelctor from react-redux useEffect from react @reduxjs/toolkit: configureStore This function provides a convenient abstraction over createStore function of redux library. It adds good defaults to the store for better experience(e.g. DevTools, Redux-Thunk for async actions). @reduxjs/toolkit: createSlice This f

Introduction React was first introducted to general public in May 2013; roughly three years after the first release of Angular JS (October 2010). Soon, it picked up the momentum and now is the highest stared(~150K) and forked(29.2K) repository on Github. The positive point of React with its contemporary libraries was the backward compatibility in all the released versions. It started as a class based library (extending React.Component ) to pure functional library with React Hooks ; still keeping backward compatibility. Now, new features include asyncronous rendering with Suspense . React's ecosystem is very vast with lots of frameworks available to choose from. We will start with building first simple a.ka. Welcome react application and then build full-stack application with React, Redux, reselect, Next.JS, express JS and Node.JS. So, stay tuned :) Building your first React application You can create React application with project like create-react-app or can create custom

Building a Blog Post application Let's create a blog post application. It will have below features: Option to search blog posts. Option to list blog posts. Option to show blog post. Create a new project with npx create-react-app react-blog-posts --template typescript . Create BlogPosts.tsx component under src/components folder and IBlogPost model under src/models . import React from 'react'; import IBlogPost from '../models/IBlogPost'; interface IBlogPostsProps { posts: Array<IBlogPost> } function BlogPosts(props: IBlogPostsProps) { return ( <div className="blog-container"> <ul className="blog-posts"> { props.posts.map(post => <li key={post.id}>{post.title}</li>) } </ul> </div> ); } export default BlogPosts; interface IBlogPost { id: number title: string content: string author: string postedOn: string tags: string[]