Next.js + Kubernetes

Microservices with Node JS and React

Source Code Download

The project contains a submodule, clone with these parameters:

git clone –recursive https://github.com/josecho/MicroServicesNatsStreamingBlog.git

The code has changed, to see the code we mentioned in the post:

git checkout handlingPayments

Source Code Download

git clone https://github.com/josecho/MSNatsStreamCommon-.git

What is Client-side rendering (CSR)?

Client-side rendering (CSR) means rendering pages in the browser using JavaScript. All logic, data fetching, templating, and routing are handled on the client rather than the server. Client-side rendering can be difficult to get and keep fast for mobile.
Client-Side Rendering

What is server-side rendering?

Server-side rendering (SSR) is an application’s ability to convert HTML files on the server into a rendered HTML page for the client. The web browser submits a request for information from the server, which instantly responds by sending a fully rendered page to the client.
Server Side Rendered
Nextjs inspect URL

What is Next.js?

Next. js is a React framework that enables several extra features, including server-side rendering and generating static websites. React is a JavaScript library used to build web applications rendered in the client’s browser with JavaScript.
Next.js is a react based framework
In this application, Javascript has been used to write the client module, not Typescript. Usually, it would be beneficial to use TS, but this particular app would need a lot of extra TS stuff written to get little benefit.

Next.js + Kubernetes

This app uses SSR on Kubernetes infrastructure. Below we will look at some of the points at which Next.js is affected by this K8s environment.

Custom Webpack Config: Next.js + Docker

Next.js has issues with file change detection when running inside a Docker container. Next.js doesn’t always reflect file updates, even if it sometimes seems to work. To detect file changes, we create the next.config.js file.
Weppack middleware

This file is loaded by Next.js every time our project starts. A middleware function modifies the behavior of webpack . Instead of following the default setting to watch for file changes, it is prompted to extract changed files from our project directory every 300 milliseconds.

What is _APP js file in NextJS?

Use _app. js to extend react applications in Next.js. When using Next.js you’ll most likely need to override the global App component to get access to some features like persisting state or global layouts.

Next.js uses the App component to initialize pages. You can override it and control the page initialization and:

  • Persist layouts between page changes
  • Keeping state when navigating pages
  • Custom error handling using componentDidCatch
  • Inject additional data into pages
  • Add global CSS

To override the default App, create _app.js file as shown below:

Custom app

As you can see above, we are customizing the app by adding CSS and creating a header globally. At the same time, AppComponent is wrapping all app components.

So, unfortunately, when we tie getInitialProps to the AppComponent, the getInitialProps function that we tie to an individual page does not get invoked anymore.

Next.js

For this reason, we must make the call to getInitialProps functions that we tie to an individual page from the App component, as seen in line 20.

if (appContext.Component.getInitialProps) {

        pageProps = awaitappContext.Component.getInitialProps(appContext.ctx);

}

Next.js