Free AI web copilot to create summaries, insights and extended knowledge, download it at here

Abstract

 <a href="https://javascript.plainenglish.io/serverless-function-in-next-js-3cd0d22ab983">
        <div>
          <div>
            <h2>Serverless Function in Next JS</h2>
            <div><h3>Detailed understanding of Serverless Function in Next JS</h3></div>
            <div><p>javascript.plainenglish.io</p></div>
          </div>
          <div>
            <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*dEIjRj-29hSJsPiTap-MlA.png)"></div>
          </div>
        </div>
      </a>
    </div><h1 id="a1e8">Image component</h1><p id="05de">CRA doesn't provide lazy loading or perform optimised image loading in Frontend. You have to depend on a third party like react-lazyload to execute lazy loading or other features for the application that have lots of image rendering going on.</p><p id="c050">But Next JS provide an image component that handles these pain points for you. The Image component provided by Next JS is so powerful be a default to handle heavy image rendering applications in much more performant and optimised ways.</p><div id="f91f" class="link-block">
      <a href="https://readmedium.com/a-perfect-way-to-load-images-in-react-f730d00119bf">
        <div>
          <div>
            <h2>A perfect way to load Images in React</h2>
            <div><h3>Working with images in Next JS, caching and lazy loading- the proper way</h3></div>
            <div><p>medium.com</p></div>
          </div>
          <div>
            <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*4Eq__0ukB9jUrfkjf8Ihcg.png)"></div>
          </div>
        </div>
      </a>
    </div><h1 id="a82e">Routing component</h1><p id="ac3d">I have already covered how dynamic routing is supported in Next JS. But for single routing in CRA, you have to depend on react-router-dom which is again a dependency and sometimes react-router-dom is something that is easy to understand for a beginner.</p><p id="c8f3">Whereas Next JS export useRouter from next router package. useRouter returns a function called a router. The router itself has multiple functions to handle routing within the entire Next JS application.</p><div id="6e66"><pre><span class="hljs-keyword">import</span> { useRouter } <span class="hljs-keyword">from</span> <span class="hljs-strin

Options

g">'next/router'</span>;</pre></div><div id="bb64"><pre>const router <span class="hljs-operator">=</span> useRouter()<span class="hljs-comment">;</span></pre></div><h1 id="3845">Custom document file</h1><p id="b297">This is useful to handle document titles, a complete custom head section with a logo on the browser tab and so on. Custom Document file helps to load integrate third-party libraries such as Material-UI or ant design.</p><h1 id="b628">Custom Error page</h1><p id="3b00">Some routes of your application are not found in such case you prefer showing 404 error and Next JS provides custom editable 404 pages which is again not supported in CRA.</p><p id="b91f">Inside pages, the directory adds a page name 404.js. Inside this page create the interface in whichever way you want to and your custom error page is ready to use.</p><h1 id="9fdc">Conclusion</h1><p id="daf8">I will still comprehend why developers are using Create React App. Next, JS is so powerful and provides so many features out of the box, which is difficult to execute in CRA.</p><h1 id="53ba">💻 www.ihatereading.in</h1><p id="3fd0">Until, next time. Have a good day, People</p><div id="b59b" class="link-block"> <a href="https://readmedium.com/building-solid-next-js-architecture-a8c6702dc67d"> <div> <div> <h2>Building solid Next JS architecture</h2> <div><h3>Building solid Next JS architecture for react applications.</h3></div> <div><p>medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*462wg1cJriKbJfl5fKKaCg.png)"></div> </div> </div> </a> </div><div id="2f9c" class="link-block"> <a href="https://readmedium.com/firebase-authentication-in-less-than-5-minutes-dce8ad5b8459"> <div> <div> <h2>Firebase Authentication in less than 5 minutes</h2> <div><h3>Adding firebase authentication using email and google mail.</h3></div> <div><p>medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*afdl7DpT5ZIGHc8kEbS1vA.png)"></div> </div> </div> </a> </div></article></body>

You really need to migrate to Next JS

And here are the reasons, Why?

SEO optimization

Create React App runs the application on the server-side and for google crawling to these sites' contents is quite difficult. Google crawls best over static files and Next, JS does provide it and takes care of it. Next JS helps your website to be easily crawled by google search crawler and hence providing better SEO.

Dynamic routing

This is very much useful for blogs, e-commerce and multiple routes web applications. I faced difficulty in adding dynamic routes in CRA, whereas Next JS depends on express which serves the dynamic file routing system.

This makes dynamic routing and simple routing so easy and decouples from a single component unlike in CRA.

Server-side data fetching

getIntialProps and getServerSideProps are 2 ways to fetch data for some pages which are heavily dependent on data from API. These 2 methods help to fetch data way before the page is loaded or rendered even way before useEffect gets called for any component. This is so powerful in the case of data fetching and protected routes.

Please do check these API provided by Next JS as they are way helpful in performant application development.

Serverless API

For some cases, you need to use npm packages or a local file system which are not accessible on the client-side or in the browser, for example, the fs module of Node JS. In that case, Serverless API is so useful as they run on the frontend repository but they use the express server of Next JS under the hood.

Also, serverless API by the virtue of their name, doesn’t need a server to host they are hosted in the same server as your frontend.

Using serverless API is so useful when you only need some backend API to fetch data instead of creating whole backend services.

Serverless Function in Next JS

Detailed understanding of Serverless Function in Next JS

javascript.plainenglish.io

Image component

CRA doesn't provide lazy loading or perform optimised image loading in Frontend. You have to depend on a third party like react-lazyload to execute lazy loading or other features for the application that have lots of image rendering going on.

But Next JS provide an image component that handles these pain points for you. The Image component provided by Next JS is so powerful be a default to handle heavy image rendering applications in much more performant and optimised ways.

A perfect way to load Images in React

Working with images in Next JS, caching and lazy loading- the proper way

medium.com

Routing component

I have already covered how dynamic routing is supported in Next JS. But for single routing in CRA, you have to depend on react-router-dom which is again a dependency and sometimes react-router-dom is something that is easy to understand for a beginner.

Whereas Next JS export useRouter from next router package. useRouter returns a function called a router. The router itself has multiple functions to handle routing within the entire Next JS application.

import { useRouter } from 'next/router';

const router = useRouter();

Custom document file

This is useful to handle document titles, a complete custom head section with a logo on the browser tab and so on. Custom Document file helps to load integrate third-party libraries such as Material-UI or ant design.

Custom Error page

Some routes of your application are not found in such case you prefer showing 404 error and Next JS provides custom editable 404 pages which is again not supported in CRA.

Inside pages, the directory adds a page name 404.js. Inside this page create the interface in whichever way you want to and your custom error page is ready to use.

Conclusion

I will still comprehend why developers are using Create React App. Next, JS is so powerful and provides so many features out of the box, which is difficult to execute in CRA.