Next.JS Mock Interview | Interview Questions for Senior Next.JS Developers

[Music] hey guys uh we are back here with another mock interview video uh I'm Jan I'm from Brazil I'm software engineer touring uh I've been working software engineer for quite some time now and uh I worked with uh specifically web development with JavaScript but I also doubled a b with C Python and other languages uh today I'm interviewing mananta uh from India and let's hear a little bit about himself yeah hi everyone uh so hi JP uh so I'm from uh Hyderabad Telangana so I have completed my bachelor in computer science from Tri D so

I have been associated with many lares like Oracle DBS and also ton for a brief period so my major uh Focus areas are frontend and also backend so I have experience in nextjs for almost one and a half year thank you that's awesome man uh yeah you've been working hard uh throughout your career I want to know a little bit more about next projects you've been hiring uh as part of uh DBS Cloud migration project uh so I have worked in nextjs um me developing web pages in nextjs and deploying them on lambdas so we've

approached a serverless model for that um so the project in itself is a very huge one uh so consing I mean we are tend to uh move all the uh websites on all the DBS websites from on premise servers to AWS Lambda um so for last one and a half year I've been like writing data fing and also integrating components in the uh nextjs Pages uh so um my more uh concentration in xjs was towards the server side rendering and confing configuring the nextjs apps onto lambdas nice nice uh can we move forward with more

technical stuff about nexs yeah sure sure J great uh I want to ask you first what are the types of pages and websites that we can use and can create with nextjs uh so nextjs like we can uh start creating using I mean we can create basically any type of website maybe single page website or any static website so what what the major advantage of using nextjs is like we have more SEO friendly web pages uh and websites uh and also most of this njs web pages or servers are rendered and that helps in load

times and better Lighthouse results and also they they tend to build a very Progressive web apps um so so basically what what we can achieve is a better performing website uh using nextjs that's great man um nice uh sum up of everything that next uh is possible to do that's great uh so when we need to create a page uh that is that we need data from outside so what are the best ways to fetch data depending on the types of page of course uh okay um so in nextjs We have basically few Concepts we

can say uh of server rendering mostly so there are SSR like server side rendering static site regeneration uh client side rendering of course and also Dynamic routing and also incremental static regeneration so for each of this concept we NJ support different methods uh so for SSR we have get server side props which is which is a first meod which is being called in the web page I mean server side render page uh for static side generation we should be using get static props uh and for client side rendering anyway we add our use effects into

uh react components which actually renders the client side and for dynamic routing we will use get static parts and for in incremental static side reg regeneration uh we we should use a get static props with the revalidate prop so that will actually says the uh site uh when to regenerate again uh so there a few few ways we can fetch the data next years okay that's awesome so for static generated Pages we get the get static props and if we add the the revalidate option and then it will regenerate that static files over time right

and when the yes the next fatch for the page that that that's great great uh uh great work man uh so when we starting a new project uh is it okay to use create react app or are there other options uh so create react app is mainly used to create a re react application not necessary next application um and it comes with a boiler plate code you can say um and nextjs is an open source lightweight full stack react framework you can call that and it comes with an efficient build system and also other uh

other things like routing API routing and uh other features which make our development of a website easy but in case of react app we may need to are those libraries separately so we maintenance and configurability is um is react is required even after C create react app okay so what would you uh suggest for people starting a new next project what command should I use uh create a next St I mean uh next St okay so it comes with everything needed to start a next application right yes create next app yeah awesome awesome yeah if

we start with create R app we can do a next application but you have to to download a lot of stuff right and create another other bundles and other baller plate code so yeah yeah yeah that that that's great so one nice feature that I like a lot about nexs uh is code splitting uh are you familiar with code splitting uh yes uh I'm familiar can you explain a little bit about the the code splitting next um normally we split uh the normal application or the web page website into multiple Pages uh that can be

accessed from different URLs let say so so each of these Pages becomes a unique entry point into the application so for C splitting like it's a process of splitting the applications one bundle into smaller chunks required by the each entry point uh so the so so suppose we have a few customer View and manager view so we have two different entry points so we we split the code into two two different uh chunks and they can be accessed individually so the main goal here is to improve the application initial load Time by only loading the

code required to run the the particular view uh so that's how nextjs has a support into embedded into it using the Pages directory um which which actually splits its own uh code uh based on the pages which are mentioned under the Pages directory I mean basically the pages which are mentioned under the Pages directory um okay that's a nice answer uh can you explain me a little bit better if I could do code splitting in the same page because you said that different pages come with different bundles and could I do for the like if

the person is not using a component it will not be loaded uh or there's a technique for that yeah uh in xjs we can uh approach the dynamic input way like it splits the code via inline function calls within modules and it is mainly used to enable Pages uh that can uh never load a necessary code instead of loading the necessary code it only loads those code when when it is required I mean loads the Imports when it is required yeah that's great uh let's talk a little bit about something that's very popular right now

specifically for blogs and news outlets uh that's e uh accelerated uh mobile Pages uh can you explain me uh what it is first uh so m is an accelerated mobile Pages uh it's an open source we components framework uh this is used for increasing the speed of loading web pages uh and amp imposes like very strict guidelines on the HTML CSS and JavaScript of a page controlling how external resources like media uh and other scripts are loaded uh that's about okay uh what's the advantage of using an AM page because there is those strict ability

that uh we have to remain like in certain CSS limit to of uh uh size limit and other HML uh limits that we have to follow but what do I again for following those okay uh EMP web pages are like loaded Direct direct L into the Google's mobile search results with a lightning icon so that's getting better SEO for us and also they have better performance and better scalability uh so that's we why we go use and they also like these websites are indexed faster in the browsers like I said already I mean they are

directly loaded in the Google mobile search yes yeah that's great yeah and the cwv values also amazing with EMP I also had like a case that was changing some pages to MP and like the cwv score went from 60 to 99 99 you know so that's great for CEO indexing yeah for sure yeah uh if I want to use uh a am page with next how do I validate it uh okay so in JS uh there is an inbuilt function I mean inbuilt validator html validator uh which which can be used during the uh development

uh and also like warnings other fatal errors will be displayed in the terminal where the nextjs is started uh and we can also configure our own custom validator in the next config.js um and normally when export the next app right using the next export so those pages will get validated on the I mean on the next export so and the issues will be displayed on the terminal and we can resolve the issues based on our needs okay great answer so uh like what are the ways I could deliver am Pages uh so normally uh we

can deliver ANM page based on uh two methods like one is EMP first Pages uh so these pages are soled to the primary traffic of a website uh as well as traffic generated from a search engine so both the traffic will be served with the same first page uh normally in the hybrid amp Pages um so there will be an a page which will be coexisting with a normal traditional page so whenever SE search engine traffic request for that we serve it with a page and when when there is a different uh traffic requiring the

web page we sub it with a traditional page as far as the injs so we can we can Ser we can achieve this hybridm using usamp hook uh and based on that we can S I mean based on that it will create multiple Pages pages and also normal three page and it will be served as according yeah that's great great answer yeah and for the the non like hybrid the good thing is the user if who wants to choose the normal uh page or the EMP sometimes we have more functionalities with non amm pages so

yeah that's a great way uh so let's talk a little bit let's go out of EMP uh subject and let's talk uh of one way of stylizing your components and your pages so can you explain a bit more about styling uh style GSX with ma uh okay style jsx is a CSS injs Library uh which is used by the developers to write scoped and encapsulated CSS uh to style the nextjs components uh so the Styles introduced to one component with the style will not affect the other components I mean that thus will it will enable

the developers to add delete or change the Styles without woring to worrying that it affects the other uh other styles or other elements so yeah that that's perfect so could you explain me what are the benefits of implementing serverless uh on an application and how would I implement it uh okay um so serverless applications uh are meant to be less resource uh resource demanding uh we can say so they are provisioned on on request or on demand from a customer or on a web server I mean web clients so what what what model the Ser

tries to achieve is a pay as you go I mean the cost effective model uh or pay pay for what you only use uh so one of the example is AWS lambdas so we can provision AWS lambdas very low cost and uh you pay only for what a Lambda is uh executing or how much time it is executing uh and for for for our project we went with the same AWS lambdas uh so the inment on the lambas ver OJs for the nextjs uh and for to achieve that uh we had uh we have to

do uh serverless as a build Target in the next config JJs and also add a cloud front compat uh so that we can uh inest the data into the Lambda or the nextjs method okay okay uh very uh lengthy answer I like it very good uh we talked about this next subject earlier and uh I want you to explain me a little bit more about it but uh uh can you explain me SSR pages okay so SSR stands for like I said server side rentry um so server side rendered Pages uh are I mean rendered

on a server or a serverless model uh so basically in nor normal traditional websites before the is uh tend to render everything on a client web client web browser uh so that that that may be uh so the user experience for that will be different for different users so to more or less achieve the same user experience so we tend to uh render the whole web page on the server or in this case AWS lambdas uh and deliver the pure HTML or uh HTML and plain HTM ML and CSS and very least JS onto the

client side so so that the initial load times will be faster and the page will be readily available in the browser uh so this this is one of the advantages of using SSR and to use SSR in a page in nextjs so under under Pages directory in nextjs uh for each page we need to add get server side props method uh so the server side props method acts as an initial data uh collector or Intel data fetching for the uh server side web page uh so and it's an as sync function and uh um this

is called every time a request is made to the xjs that's a great explanation uh something that I like a lot about SSR and other uh techniques to render on the server are the security you don't expose your your backand or other apis because everything is doing on the server and lowend um devices with small processing power also benefits with it because it only gets static pages right yes but that was a great explanation nonetheless uh and I think that's it uh thanks a lot manikanta that was a great talk thank you thank you Z

all right so everybody that's watching us I hope hope you have a great time as well uh as we did and uh if you want to see more mock interview we already have a lot of videos on the platform and you can always comment down below if you want any other subject that we didn't do before and uh don't forget to gives us a thumbs up uh that helps us uh with the algorithm and uh helps us to understand what you guys like to see more okay see you guys later thanks and have a great

day oh [Music]