Unlimited Next.JS course

We will walk through almost each and every step of Next.js to become a potnetial app developer who will stand out among others.

We are going to build a stackoverflow type site where user can post a peoblem, answer a solution and so on. The project will have at most all the features that stackoverflow has.

Installation
Tailwind

Installation

The very first step is to install Next.js. before installaiton we could learn about what is Next.js and why and where to use it.

visit the doc link to have the idea: Next.js

Now if we went through the documnetation, we already have seen from where to start. Anyway, to install a project we need to run the following command.

npx create-next-app@latest <project_name>

Choose all the necessary options required for the project. Mostly go with yes yes and yes. For more details follow the link: Next.js Installation

Tailwind

While initializing Next.js tailwind also install automatically(unless you select no to tailwind). in tailwind V4 we need to manually install typewriting(for typescript) by following command.

npm i @tailwindcss/typography

We also need to add the following plugin for tailwind in global.css file at the second line after tailwind import

@plugin "@tailwindcss/typography";

Theme

To add theme feature in the app we need to install a small package called next-theme. Follow the link to see the theme. Also to give a kick start, use the command

npm i next-themes

Now we need to create a theme provider which will provide themeing features in our app. To do so, we need to create a folder at the root called context(to stucturise our project we are creating the folder). Inside the folder create a new file called Theme.tsx and then write the following code to create the provider

"use client";
import { ThemeProviderProps } from "next-themes";
import { ThemeProvider as NextThemeProvider } from "next-themes";
import React from "react";


const ThemeProvider = ({ children, ...props }: ThemeProviderProps) => {
 return (
   <NextThemeProvider
     {...props}
     attribute="class"
     defaultTheme="system"
     enableSystem
     disableTransitionOnChange
   >
     {children}
   </NextThemeProvider>
 );
};


export default ThemeProvider;

We have created the theme provider and it is time to wrap the children in the global layoput file.

<html lang="en" suppressHydrationWarning>
     <body
       className={`${inter.className} ${spaceGrotesk.variable}  antialiased`}
     >
       <ThemeProvider>
         {children}
       </ThemeProvider>
      
     </body>
   </html>

Authentication

There are many way to perform authetication in app but we will use Auth.js as this supports many providers like Google, GitHub, social and OTP authentication. to start with Auth.js visit the link above. to give a headstart, run the command

npm install next-auth@beta

Next, we need to create authentication key and do so, we will run the following command which create an .env.local file with auth key

npx auth secret

Config

after installationa nd generating the auth key, it is time to config the auth. Create auth.ts file at the root of the app and write the follwoing code.

import NextAuth from "next-auth"
export const { handlers, signIn, signOut, auth } = NextAuth({
 providers: [],
})

after creating the auth.ts file we need to create dynamic route for authentication. to do so create a file route.ts o the follwoing path. /app/api/auth/[…nextauth]/route.ts and add the following code

import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers

After that we need to add an optional middleware at the root of the project as middleware.ts directory as middleware.ts and add the following code

export { auth as middleware } from "@/auth"

N.B. follow the documentation link to know why we are adding all these files and code.

Providers

At this point we need to decide which provider shoudl we use among the 4 providers. we will use OAuth for this time. For better understanding follow the documentation