Author: Akhil Johny

Difference Between tsx and jsx in React

.js is JavaScript, plain and simple. .ts is Typescript , Microsoft’s way of adding “concrete” types to JavaScript .jsx is JavaScript but with JSX enabled which is React’s language extension to allow you to write markup directly in code which is then compiled to plain JavaScript with the JSX replaced with direct API calls to React.createElement or whatever API is targeted .tsx is similar… Continue reading Difference Between tsx and jsx in React

What is a Netsuite ERP

Netsuite ERP NetSuite is a software company that has developed a cloud-based business management platform used by more than 37,000 fast-growing organizations across the globe. That platform consists of a suite of applications that help companies run their business, understand the performance of their businesses and drive major efficiency gains and cost savings. That gives… Continue reading What is a Netsuite ERP

Enable AMP in Next.js?

This is an important question and is asked in many Next.js interview questions. There are two ways to enable AMP in Next.js. AMP-First Pages Hybrid AMP Pages AMP-First Pages: The AMP-First Pages are served to the primary traffic of the website as well as traffic generated from the search engine. Use the following syntax to implement… Continue reading Enable AMP in Next.js?

How to set up CDN in Next.js?

To setup CDN in Next.js, the developers have to follow the steps given below: To start, we have to first set up the “assetPrefix” setting and configure our CDN origin to support and resolve the domain that our Next.js is hosted on. const isProd = process.env.NODE_ENV === ‘production’;    module.exports = {   // You may only need to add assetPrefix in the production.    assetPrefix: isProd ? ‘https://cdn.mydomain.com’ : ”   };   If the CDN is present on a separate… Continue reading How to set up CDN in Next.js?

Recommended method to fetch data in Next.js?

There are multiple ways to fetch data in Next.js, but Next.js itself recommends getInitialProps, an async function to retrieve data from anywhere. When we use getInitialProps to retrieve data, it receives a context object which has the following properties: pathname- It specifies the path section of the URL. query- It is used to specify the query string section of URL parsed… Continue reading Recommended method to fetch data in Next.js?

Styling in Next.js(React Js)

Styling in Next.js offers flexibility, and you can choose from various approaches. There exist 2 popular approach. CSS-in-JS with styled-components and traditional CSS with CSS modules 1.CSS-in-JS with Styled-Components: // components/Button.js import styled from ‘styled-components’; const StyledButton = styled.button`padding: 10px 15px;font-size: 16px;color: white;background-color: ${(props) => (props.primary ? ‘blue’ : ‘green’)};border: none;border-radius: 5px;cursor: pointer; &:hover {background-color:… Continue reading Styling in Next.js(React Js)

API Routes in Next Js

In addition to creating page routes, which means pages are served to the browser as Web pages, Next.js can create API routes. This is a very interesting feature because it means that Next.js can be used to create a frontend for data that is stored and retrieved by Next.js itself, transferring JSON via fetch requests. API routes… Continue reading API Routes in Next Js

Using next/router in Next.js

It’s really handy to manage routing in JSX, but sometimes you need to trigger a routing change programmatically. In this case, you can access the Next.js Router directly, provided in the next/router package, and call its push() method. Here’s an example of accessing the router: Once we get the router object by invoking useRouter(), we can use its methods. This… Continue reading Using next/router in Next.js

Next.js Compiler

The Next.js Compiler, written in Rust using SWC, allows Next.js to transform and minify your JavaScript code for production. This replaces Babel for individual files and Terser for minifying output bundles. Compilation using the Next.js Compiler is 17x faster than Babel and enabled by default since Next.js version 12. If you have an existing Babel configuration… Continue reading Next.js Compiler