Digital Transformation in HealthCare Solution

Tech Talk

Next.js - Powerful React Framework

31 DEC 2020

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

Why we go with Next.js?

1

Image Optimization

Next.js come up with built-in image component and automatic image optimizaion. Automatic Image Optimization resize, optimize and server image in modern WebP instad of shipping large image to devices with small view port. Instead of optimizing images at build time, it optimize image on-demand as per user request. NextJS optimize image size upto 80%.

2

Internationalization

Next.js come up with build-in internationalization(i18n) support. It's as simple by providing list of locales, default locale and domain-specific locales. Next.js will automatically manage routing for your web app. Its complement existing i18n library solution like react-intl, react-18next, lingui. Next.js handle local strategies in two ways, 1. Sub-path Routing, 2. Domain Routing. You can simply turn-on automatic local detection and Next.js will do rest for you.

3

Next.js Analytics

Next.js Analytics provide you real-time visitors & page-by-page analytics for your web app. So you only focus on most visited pages of your website and you can improve performance to give seamless experience to your customers. To start collecting your real experience score right from your Vercel boards by enabling Analytics for your Web App.

4

Zero Config

Next.js come up with Automatic compilation and bundling with(webpack and babel. It's Optimized for production from the start when you create app. React Fast Refresh, Static generation and server-side rendering of pages are in-build in Next.js.

5

Hybrid: SSG and SSR

Most powerful feature is pre-rendering: Static Generation (SSG) and Server-side Rendering (SSR) at build time by using power of Next.js API like getStaticProps, getStaticPaths, getServerSideProps.

6

Incremental Static Generation

No more need to wait to load dynamic content, as static content can also be a dynamic. Incremental Static Regeneration allow you to update exisitng pages by re-rendering them in background as traffic comes in.

7

TypeScript Support

Next.js provide an integrated TypeScript support, as simply creating tsconfig.json file. You can simply convert files from .js to .tsx and get support of TypeScript. You can use Next.js API as simply in Typescript like GetStaticProps, GetStaticPaths, GetServerSideProps types respectively.

8

Fast Refresh

Fast Refresh gives you instantaneous feedback on edit made to your React Component. That will quickly help you to identify Syntax Errors, Runtime Errors, etc.

9

File-System Routing

Next.js having a file-system based router build on concept of pages. Next.js supports Index Routes, Nested Routes, Dynamic Route Segments. Files added in pages are automatially available as a route. Like 'pages/index.js' -> '/', 'pages/blog/index.js' -> pages/blog many more.

10

API Routes

Now, Build your api with Next.js, simply put your api under 'pages/api' is mapped to '/api/*' and will be treated as an API endpoint instead of a 'page'. You can use GET, POST many more.

11

Built-in CSS Support

Now, you can import CSS file directly in JavaScript file, because Next.js extends the concept of 'import' beyond Java Script. Simply create global CSS file within 'pages/_app.js'.

12

Code-splitting and Bundling

Optimized bundle splitting algorithm created by the Google Chrom Team. Next.js automatically split code for Server Redenering & Client Redering on build time. So files which render on server will not showing in client bundle.

Want to receive Tech Articles!

Get tech aricles directly in your inbox! Share your email with us and receive tech articles as instant as we publish!

Thanks for reading Blog!

KPIENG

KPITENG

DIGITAL TRANSFORMATION

Want to talk about your project?

  • INDUSTRY
  • E-Commerce & Shopping
  • Healthcared & Fitness
  • Banking & Finance
  • Education
  • Logistics & Distribution
  • Social Networking
  • Real Estate
  • Food & Restaurant
  • On-Demand Services
  • Media
  • IT & Telecom
  • Productivity

Want to talk about your project?

© 2021 KPITENG, all rights reserved