NEXTJS NOTES

NextJs Installation

$npx create-next-app@latest

Run Project

$npm run dev

Next Auth

$npm install next-auth

Mongoose

$npm install mongoose

DotEnv (process.env)

$npm install dotenv

Bcrypt

$npm install bcrypt

MongodDb Adapter

$npm install @auth/mongodb-adapter mongodb

Google Oauth consent screen

1. Google console cloud
2. Create project
3. OAuth consent screen

Authorized redirect URI

# use domain name in production
http://localhost:3000/api/auth/callback/google

Troubleshooting

Modules not found inside [...nextauth]/route.js, @/app and @/libs

// https://github.com/dejwid/food-ordering/blob/master/tsconfig.json
// Add in tsconfig.json
"paths":{
    "@/*":["./src/*"]
},

Page Directory: app/register/page.js

http://localhost/register

App URi Directory: app/api/register/route.js

fetch('/api/register', {});

Fix: Monggo Database connection, use 127.0.0.1 not localhost

// Project-Folder/.env
MONGO_URL='mongodb://127.0.0.1:27017/pizza-shop'

Tailwind Css

button {
    @apply block w-full text-gray-700 font-semibold;
}

AppContext (SessionProvider)

// AppContext.js (Composition)
export default function AppProvider({children}){
    <SessionProvider>{children}</SessionProvider>   
}
// layout.js
// import { AppProvider } from 'AppContext.js'
<AppProvider>
    <main></main>
</AppProvider>

Allow Remote files

next.config.mjs

// used in: app/profile/page.js
// @type {import('next').NextConfig}
const nextConfig = {
    images: {
        remotePatterns: [
          {
            protocol: 'https',
            hostname: 'lh3.googleusercontent.com'
          },
        ],
      },
};
export default nextConfig;

or next.config.js

const nextConfig = {
    compiler: {
        removeConsole: false,
    },
    images: {
        domains: ["cdn.imagin.studio"] //Allow the external API url in NextJs for images
    }
}

getServerSession not working

1. NEXTAUTH_SECRET="thisissecrete"
2. use in [...nextauth]/routes.js

use await

await getServerSession(authOptions)

Unable to update records in schema

Check schema attributes if complete. 'name':'', 'email':'', etc..

AWS S3 Upload

https://youtu.be/nGoSP3MBV2E?si=HDFaC_yNUEorF2iz&t=13457

$npm install @aws-sdk/client-s3

$npm install uniqid

React Hot Toast

$npm install react-hot-toast

// layout.js
// https://medium.com/@morerahul620/react-hot-toast-setup-in-next-js-bbf2b5d91c63
import { Toaster } from "react-hot-toast";

<Toaster position="top-center" />

Server/Client Components

// by default components are Server side componets
// add "use client"; above the file to allow client side rendering

"use client";
import React from "react";

Troubleshooting

app-index.js:31 Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded,data-gr-ext-installed

Disable Grammarly chrome extension and ColorZilla

screen.js:1 Uncaught TypeError: Cannot read properties of null (reading 'getContext')

Unable to commit NextJs project folder in Github

Manually copy the files and folders to a new folder leaving, hidden files.

References

Nextjs SEO Checklist

Nextjs Medium