Next.js is a popular open-source framework for building server-side rendered (SSR) and statically generated React applications. It was created by Vercel (formerly known as Zeit) and released in 2016.
Next.js provides a set of tools and features that simplify the development process of React applications, including automatic code splitting, server-side rendering, static site generation, and client-side rendering.
-
One of the main benefits of using Next.js is that it provides a seamless developer experience for building fast, SEO-friendly, and scalable web applications. It also includes a wide range of plugins and integrations with other popular tools and services, such as TypeScript, GraphQL, and AWS.
-
Next.js is a powerful framework that allows developers to build complex web applications with ease, while also providing excellent performance and SEO benefits.
-
Next.js improves user experience and it works very fatser than React
-
Able to build Router very easily
-
Next js Helps in Authentication,Authorization .
- To create Next.js app using some command
or
or
- After the installation is complete:
Run
or
or
to start the development server on
- When we run npm run dev it move to pages folder inside pages folder it will looks for _app.js file in that file the App component will takes others component as props here App component is a higher order component because it takes other component has a props and inside App component other component wil be declared and we are able to see in UI This how Next js Render
- if we create about.js file inside pages folder it automatically creates about route --> /about
- if we create profile.js file inside pages folder it automatically creates profile route --> /profile
- if we create blog folder inside pages folder than we create firstblog page inside blog folder it creates router like this --> /blog/firstblog
- if we create blog folder inside pages folder than we create secondblog page inside blog folder it creates router like this --> /blog/secondblog
- Example i want all products page first soo in side product folder we have to create one index.js whenever we hit /product it render index.js file and we able to see all products in ui.
- after we want only single product page soo here we have to use [productid].js file it represent whenver if anything is present in after /product/1 like this it will render [productid].js file and able to see single products.
- then extract that id using useRouter from 'next/router' it will provide id of the perticular products.
- whenever using Link first we have to import Link from 'next/link
- Then declare the Link component where we want and Link component takes href as a parameter we have to provide routes here like this
- using useRouter able to achive navigate like
- const router=useRouter()
- router.push('/blog')
- it will directly navigate to blog page when we click any button.
- using getStaticProps async function we have to decare outside of component and export that function .
- then where we have to want that getStaticProps we have to takes as a props and using the data and
- it must return some data.
- some html contents are renderd previously in build time so it makes fucntionality speed.
- it means some static html docs are automaticaly running. and it will rendered more speed
- inside pages whatever we create we can navigate using route
- and component means it will create some component and we can extract that comonent and import wherever we need .
- getStaticPaths means define some paths usning paths object.
- fallback is a boolean values using thise we can show some loader and achive timelaps