🚀 Next Js Basics || Next Js for Beginners

Показать описание

Create Next js Project
To start with Next js, install it via npx create-next-app command. This initializes a project with the necessary configuration to run a Next js app, including the app directory (for App Router-based routing), pages directory and all essential files.

App Routing

useRouter
The useRouter hook is used to access the router object inside React components. It provides route-specific details and functions, allowing navigation and route manipulation programmatically, such as navigating between pages or fetching route parameters.

Dynamic App Routing
Dynamic routing is set up by creating files within square brackets, such as [id].js. This approach allows building routes with variable parameters, making it easy to handle routes based on dynamic values like user IDs or product SKUs.

Nested Routes

Nested Dynamic Routing

useState and useEffect
These React hooks are widely used in Next js for managing component state (useState) and performing side effects (useEffect). They integrate seamlessly within Next js components to handle interactive features, data fetching, and component lifecycle events.

Create and Import Components
Creating reusable components is straightforward in Next js. Components can be organized within a components folder and imported wherever needed. This promotes clean, modular code and allows easy updates across different parts of the application.

Apply Styles

Reusable Input & Button Components
Creating reusable UI elements like buttons and input fields can help maintain consistency across the app. Define these components once and use props to customize their appearance and behavior, such as size, color, and event handlers.

Dynamic OnChange
For input components, a dynamic onChange handler is crucial for tracking user input in real-time. Using onChange allows you to capture and update state as users interact with form elements.

API Routing Like GET & POST
API routes in Next js are created in the pages/api directory. You can define HTTP methods like GET, POST, etc., within each API file to handle different request types. This provides backend capabilities within the Next js project itself, without requiring a separate server.

Custom Port Number
You can customize the port on which Next js runs by using the -p flag, like next dev -p 4000, or setting PORT=4000 in .env. This is useful for avoiding port conflicts with other services on your local machine.

Custom 404 Page

MetaData
Next js allows adding SEO-friendly metadata in every route via metadata in the App Router. You can specify the title, description, and other HTML meta tags, which improves search engine visibility and user experience.

OG: Tags
Open Graph (OG) tags are essential for controlling how links from your app appear when shared on social media. These can be added in the metadata section to specify images, titles, and descriptions that show up in social previews.

CSS Modules

Tailwind CSS
Next js supports Tailwind CSS, a utility-first CSS framework. It allows for rapid styling directly in your components and can be installed and configured within Next js by following Tailwind setup guide, which includes adding it to your PostCSS configuration.

#nextjs