NextJS

The Next.js is React Based framework with server side rendering capability. It is very fast and SEO friendly. Using Next.js, you can create robust react based application quite easily and test them.

Docs

The Next.js is React Based framework with server side rendering capability. It is very fast and SEO friendly.
Using Next.js, you can create robust react based application quite easily and test them. Following are the key features of Next.js.

Hot Code Reload : Next.js server detects modified files and reloads them automatically.

Automatic Routing : No need to configure any url for routing. files are to be placed in pages folder. All urls will be mapped to file system. Customization can be done.

Component specific styles : styled-jsx provides support for global as well as component specific styles.

Server side rendering : react components are prerendered on server hence loads faster on client.

Node Ecosystem : Next.js being react based gels well with Node ecosystem.

Automatic code split : Next.js renders pages with libraries they need. Next.js instead of creating a single large javascript file, creates multiples resources. When a page is loaded, only required javascript page is loaded with it.

Prefetch : Next.js provides Link component which is used to link multiple components supports a prefetch property to prefetch page resources in background.

Dynamic Components : Next.js allows to import JavaScript modules and React Components dynamically.

Export Static Site : Next.js allows to export full static site from your web application.

Built-in Typescript Support : Next.js is written in Typescripts and provides excellent Typescript support.

Create Next App

                
                    npx create-next-app@latest

                
                    yarn create next-app

start app

                    
                        npm run start

                
                    yarn run dev

create 404 error file
create not-found.js file then nextjs automatically set as error file (in file 'notfound' fuction used)
create loading spinner
create loading.js file then nextjs automatically set loading spinner
set every page css
create css file in styles folder and rename as about.module.css
next/link

next/link

Client-side transitions between routes can be enabled via the Link component exported by next/link.

For an example, consider a pages directory with the following files:

pages/index.js
pages/about.js
pages/blog/[slug].js

Link accepts the following props:

href - The path or URL to navigate to. This is the only required prop. It can also be an object, see example here
as - Optional decorator for the path that will be shown in the browser URL bar. Before Next.js 9.5.3 this was used for dynamic routes, check our previous docs to see how it worked. Note: when this path differs from the one provided in href the previous href/as behavior is used as shown in the previous docs. legacyBehavior - Changes behavior so that child must be <a>. Defaults to false.
passHref - Forces Link to send the href property to its child. Defaults to false
prefetch - Prefetch the page in the background. Defaults to true. Any <Link /> that is in the viewport (initially or through scroll) will be preloaded. Prefetch can be disabled by passing prefetch={false}. When prefetch is set to false, prefetching will still occur on hover. Pages using Static Generation will preload JSON files with the data for faster page transitions. Prefetching is only enabled in production. replace - Replace the current history state instead of adding a new url into the stack. Defaults to false scroll - Scroll to the top of the page after a navigation. Defaults to true
shallow - Update the path of the current page without rerunning getStaticProps, getServerSideProps or getInitialProps. Defaults to false
locale - The active locale is automatically prepended. locale allows for providing a different locale. When false href has to include the locale as the default behavior is disabled. Note, when legacyBehavior is not set to true, all anchor tag properties can be passed to next/link as well such as, className, onClick, etc.
```
        
            import Link from 'next/link'
        
    
```
```
        
          

          
                <ul>
                  <li>
                    <Link href="/">Home</Link>
                  </li>
                  <li>
                    <Link href="/about">About Us</Link>
                  </li>
                  <li>
                    <Link href="/blog/hello-world">Blog Post</Link>
                  </li>
                </ul>
        
    
```
<h1> //heading content </h1>

add css in page

                    
                        import StyleSheet from '@/app/styles/main.module.css'
                        const page = () => {
                          return (
                            <div>
                            <h1 className={StyleSheet.mainmy}>contactus</h1>
                                </div>
                          )
                        }
                        
                        export default page

add font in layout page

                    
                        import { Roboto } from 'next/font/google'
 
const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
  display: 'swap',
})
 
export default function RootLayout({ children }) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  )
}

Nextjs Dynamic Route(create [id] name folder and in this folder create page.js) (slug)

                    
                     
                        <Link href={`/movie/${id}`}>

connect database to nextjs app. first create utils folder in src.then create file dbconn.js in utils

                    
                        import mongoose from "mongoose";
const MONGODB_URL = process.env.MONGODB_URL;
if (!MONGODB_URL) {throw new Error("Please define the MONGODB_URI environment variable inside .env.local" )}
let cached = global.mongoose;
if (!cached) {cached = global.mongoose = { con: null, promise: null }}

const dbConnect = async () => {
  if (cached.conn) {return cached.conn; }
  if (!cached.promise) {
    const opts = { bufferCommands: false };
    cached.promise = mongoose.connect(MONGODB_URL, opts).then((mongoose) => {return mongoose;});}

  try {cached.conn = await cached.promise;} catch (e) {
    cached.promise = null;
    throw e;
  }
  return cached.conn;
};
export default dbConnect;

add css in page

NextJS

NextJS

next/link

<h1> tag: “define heading of an HTML page but with first level”