NextJS Tutorial - All 12 Concepts You Need to Know

Overview of Next.js Features

Introduction to Next.js

• The tutorial provides an overview of the most important features in Next.js, highlighting its significance in modern web development.

• The introduction emphasizes the new app router as a transformative element for building full-stack applications using just React, eliminating the need for a separate backend.

Setting Up a New Next.js Application

• To create a new Next.js application, the speaker demonstrates setting up an empty folder and running npx create-next-app with options for TypeScript and ESLint.

• The setup process includes choosing to use the source directory and app router, which streamlines file imports by avoiding default paths like /do/.

Understanding Default Boilerplate

Initial Project Structure

• After running the setup command, a default boilerplate is generated. This includes various files that may not be necessary for all projects.

• The speaker suggests removing excess boilerplate code from the homepage to customize it according to personal preferences.

Layout Component Overview

• The layout component serves as the root component where all pages are wrapped within a body tag. It also contains metadata and links to CSS files.

• By default, styles are linked through Tailwind CSS; however, unnecessary styles can be deleted while retaining essential ones.

Routing and Navigation in Next.js

Creating Routes

• Routing is managed through creating folders within the app directory. For example, creating a folder named "posts" allows access via /posts.

• Dynamic routing is introduced by using square brackets (e.g., [id]) to handle individual post IDs without needing separate folders for each post.

Managing Layout Consistency

• A consistent header and footer across different pages are achieved through layout files that encapsulate child components.

• Each page inherits this structure, ensuring uniformity in navigation elements like headers and footers throughout the application.

Utilizing Link Components

Navigation with Built-in Link Component

• The built-in link component in Next.js simplifies navigation by rendering anchor tags without sending new requests to the server.

• This client-side routing enhances performance by prefetching pages when they come into view during production.

Configuring Metadata and Styling in Next.js

Setting Up Metadata

• The metadata configuration is crucial for SEO, as it determines the title displayed in browser tabs and Google search rankings. A global layout file can set this up for the entire app, but specific pages can override it by exporting a variable with a unique title.

Utilizing Tailwind CSS for Styling

• Tailwind CSS is integrated by default in new Next.js applications, allowing developers to use predefined class names without creating custom ones.

• Traditionally, styling required creative naming of classes (e.g., "first heading"), which could lead to context switching between files. Tailwind CSS simplifies this process by enabling direct application of utility classes.

• With Tailwind CSS, developers can apply styles directly within their components without needing to switch to separate style files or come up with unique class names.

Hosting Solutions and Image Handling

Hosting with Hostinger

• The video discusses Hostinger as a sponsor, highlighting their Black Friday sale that offers affordable hosting options for Next.js applications.

• For example, the KVM 2 plan provides 8 GB RAM and 100 GB disk space at $7/month, suitable for multiple apps including databases like SQLite.

• Users familiar with VPS hosting are encouraged to consider these attractive pricing plans while applying discount codes for additional savings.

Image Component Features

• Next.js includes an image component that optimizes images automatically (e.g., serving WebP versions), enhancing performance and responsiveness on web pages.

• This component helps prevent content layout shifts (CLS), an important metric for Google rankings. It sets width and height attributes automatically if images are stored locally.

Server vs Client Components in Next.js

Understanding Component Types

• The distinction between client and server components is emphasized; traditionally all components were client-side but now server components run exclusively on the server side.

• Server components allow direct data fetching using fetch calls without needing hooks like useEffect, streamlining data retrieval processes within the component's function body.

• Data fetched from server components can be passed down to client components seamlessly, improving efficiency in how data flows through the application.

Server Components and Their Benefits

Advantages of Server Components

• Server components can fetch data closer to the actual data source, improving efficiency by reducing latency when accessing databases.

• Large dependencies, such as third-party packages (e.g., syntax highlighters), can remain on the server, minimizing client-side resource load.

• The rendered output from server components is sent to the client without transferring all dependencies, optimizing performance.

• Switching a component to a client component increases resource load significantly (from 8.2 MB to 12.5 MB), highlighting the efficiency of server components.

Introduction of Server Actions

• Server actions are introduced as a way to handle POST, PUT, and DELETE requests directly within server components.

• A form for submitting new posts is integrated into the post route, allowing interaction with a database instead of dummy JSON data.

• Using Prisma as an ORM enables seamless database interactions within server components.

Creating Posts with Server Actions

Implementing Form Submission

• An "add post" form allows users to submit new content directly; this utilizes a function marked with use server for execution on the server side.

• Next.js automatically provides form data to the designated function without manual collection or handling by developers.

Simplifying Data Handling

• The process eliminates the need for separate API routes and complex state management typically required in traditional setups.

• Previously necessary steps like preventing default submission behavior and creating dedicated API handlers are abstracted away by using server actions.

Enhancing User Experience with Revalidation

Automatic Updates After Database Changes

• After adding a new post via the form submission, revalidating paths allows automatic updates in UI without needing manual refreshes or additional code complexity.

• This feature enhances user experience by ensuring that newly added content appears immediately after submission.

Next.js Server Actions and Loading Indicators

Implementing Real-Time Updates with Server Actions

• The component updates immediately upon submitting a new post without requiring a page refresh, thanks to local rendering.

• Utilizes the useFormStatus hook from React (compatible with Next.js) to manage the submit button's state during server actions.

• The submit button is disabled while the action is pending to prevent duplicate submissions, enhanced visually using Tailwind CSS for feedback.

Enhancing User Experience with Loading Indicators

• A loading indicator appears when a post is submitted, demonstrating real-time UI updates after a 2-second delay simulating server response time.

• Discusses the significance of server actions and hooks in Next.js as major innovations for developers.

Understanding Suspense and Streaming in Data Fetching

• When navigating to posts, data fetching can cause delays; users may not see loading indicators during this process.

• Introduces loading.tsx, which serves as a fallback UI while data is being fetched, improving user experience by showing loading states.

Managing Asynchronous Data Fetching Effectively

• Emphasizes that using loading.tsx allows Next.js to wrap components in suspense, providing better control over loading states.

• Highlights potential downsides where entire pages may block rendering until all data is fetched, negatively impacting user experience.

Optimizing Component Structure for Better Performance

• Suggestion to move data fetching logic out of main components to avoid blocking other elements like headers from displaying immediately.

• Proposes restructuring code by moving fetch logic into specific components (e.g., post list), allowing independent loading indicators without affecting overall page visibility.

Understanding Next.js: Asynchronous Components and Caching

Asynchronous Component Rendering

• The list component is asynchronous, meaning it will suspend until data fetching is complete. A loading indicator ("loading...") is displayed during this time.

• Once the data fetching resolves, posts are rendered without blocking the entire page. This allows for a smoother user experience as content streams in.

Caching Mechanisms in Next.js

• Caching in Next.js is complex but essential for performance. It involves both static and dynamic rendering strategies.

• By default, Next.js aggressively caches applications, which can be understood better with experience over time.

Client-Side Cache Behavior

• When navigating back to the homepage after viewing posts, there’s no loading indicator due to client-side caching managed by Next.js called router cache.

• This client-side cache lasts for 5 minutes and resets upon refreshing the page.

Server-Side Caching Dynamics

• Demonstrating server-side caching, a random number of blog posts (between 1 and 10) are fetched on each refresh, indicating dynamic rendering without caching during development.

• Dynamic rendering occurs when requests are made; every request fetches new data instead of relying on cached content.

Production Build vs Development Mode

• In production mode (npm run build), optimizations occur that minimize project size and enhance performance compared to development mode (npm run dev).

• The final build indicates static pre-rendering of components; these components do not re-run on subsequent visits but serve cached content instead.

Understanding Routes in Next.js

• The structure of routes in Next.js emphasizes routing over components. Static routes are pre-rendered during the build process.

• Each route's behavior (static or dynamic rendering) is determined at build time, impacting how content is served to users.

This structured overview captures key insights from the transcript regarding asynchronous components, caching mechanisms, and routing within Next.js while providing timestamps for easy reference.

Understanding Dynamic Rendering in Next.js

Static vs. Dynamic Rendering

• The initial behavior of the component shows that refreshing the page yields the same random posts, indicating static rendering during production.

• In production, components are rendered once and served statically, contrasting with dynamic rendering during development where requests trigger re-renders.

• To enable dynamic rendering for a specific route, developers can export a configuration to force it to be dynamic, requiring a rebuild of the application.

• Once set to dynamic, every refresh fetches new posts, ensuring that all child components under this route also render dynamically.

Caching Strategies

• Developers can opt for granular control over caching by specifying options like cache: no-cache for individual fetch calls within Next.js.

• For content that doesn't change frequently (like blog posts), static rendering is preferred; however, when new posts are added, strategies like revalidation can be implemented.

• Revalidation allows data to remain cached but updates after a specified duration (e.g., 1 hour), ensuring fresh content without constant fetching.

Middleware Functionality

• Middleware in Next.js runs before requests hit the server and can execute code such as user authentication checks.

• A middleware file must reside in the root of the app directory and can intercept requests to perform actions based on user authentication status.

Folder Structure Overview

• A typical folder structure in a modern Next.js app includes various configuration files and directories for public assets like images and static files.

• Special files such as favicon.ico, robots.txt, and error handling pages (error.tsx) are essential parts of the application structure that Next.js recognizes automatically.

Understanding ID Fetching in Next.js

Fetching IDs from URLs

• The process involves extracting an ID from the URL using page components, specifically through square brackets (e.g., [ID]) to define dynamic routes. This allows for fetching posts associated with that ID.

Handling Non-existent Posts

• If a user inputs an invalid or non-existent ID, the API will still return an object without a title or ID. To handle this gracefully, a "not found" function from Next.js can be invoked to display a relevant component when no post is found.

Overview of Course Offerings

• A complete course on React and Next.js is available, which includes building projects similar to the discussed application. This course aims to provide insights into real-world applications and their development from scratch. Links are provided in the description for further exploration.

Deployment Options for Next.js Applications

Static Export vs Server-side Features

• A static export can be created by generating HTML, CSS, and JavaScript files; however, this results in losing server-side features like image optimization unless explicitly set as unoptimized. This method creates static assets suitable for hosting anywhere but limits functionality.

Importance of Running a Node.js Server

• For optimal performance and access to features such as server components and actions, it’s recommended to run a Node.js server rather than relying solely on static exports. This ensures that all functionalities of Next.js are utilized effectively during deployment.

Hosting Considerations

Managed Platforms vs VPS Hosting

• Beginners may prefer managed platforms like Vercel due to ease of use; however, more experienced users might opt for Virtual Private Servers (VPS) for greater control over hosting environments and potentially lower costs at scale. Understanding these options is crucial before deployment decisions are made.

GitHub Repository Setup

• Before deploying an application, it's advisable to push code changes to GitHub first by creating a new repository where all project files—including environment variables—are stored securely while ensuring sensitive information remains protected through local files not included in version control systems like GitHub.

Environment Variables Management

Using Environment Variables with Prisma

• Environment variables are essential when working with databases like Prisma; they should be included in repositories if they contain necessary configurations but kept secret if sensitive data is involved by utilizing .local files that are excluded from version control by default settings in new Next.js applications.

Preparing for Deployment

• When ready to deploy after setting up environment variables and database configurations (like Prisma DB push), ensure that your project has been initialized as a git repository automatically during creation with Create Next App so you can easily add and commit changes before pushing them online.

Setting Up a VPS for Node.js Applications

Choosing the Right Location and Configuration

• The VPS is hosted by a Lithuanian company, but the user opts to configure it in the United States for better performance.

• Users can select from default configurations, including Ubuntu with Node.js, which is beneficial since Next.js operates on Node.js.

• A control panel option is available for easier management of multiple applications; however, it's not utilized in this setup.

Setting Up Access and Overview

• Users must set up an SSH password to access their VPS securely. This password differs from the control panel password.

• After setup completion, users receive important information such as IP address needed for connecting to the VPS and accessing applications.

Using Visual Studio Code and Terminal

• To log into the VPS via SSH, users can utilize Visual Studio Code's integrated terminal or standalone terminal options like PowerShell on Windows.

• Visual Studio Code serves as both a code editor and an Integrated Development Environment (IDE), enhancing development capabilities beyond simple coding tasks.

Installing Necessary Software

• Initial attempts to run commands in Visual Studio Code may lead to issues; thus, using a standalone terminal is recommended.

• Upon logging into the VPS, users check if Node.js is installed. If not present, they proceed to install npm (Node Package Manager).

Configuring Nginx for Application Routing

• Users will run their Next.js application using npm run start, which listens on localhost port 3000.

• To route traffic correctly from the public IP address to localhost where Next.js runs, Nginx needs configuration adjustments.

• A configuration file is created in /etc/nginx/sites-available that specifies routing rules directing traffic from the homepage to localhost:3000.

Finalizing Configuration Steps

• After pasting necessary code snippets into Nginx configuration files, users save changes and verify successful creation of configuration files.

• A symbolic link is established between sites-enabled and sites-available directories to activate the new site configuration.

How to Deploy a Next.js App on a VPS

Setting Up the Application Directory

• The speaker creates a directory for the application named "cool-app" within the /var/www path, indicating that specific paths are required for proper configuration.

• The next step involves cloning the repository from GitHub into this newly created directory using git clone, which is initiated by copying the URL from GitHub and executing the command in the terminal.

Installing Dependencies

• After navigating into the cloned repository folder, it’s noted that essential files are present. The application requires node modules, typically defined in package.json.

• To install these dependencies, running npm install is necessary. If an error occurs during installation, exiting and re-entering SSH can resolve it.

Building and Running the Application

• Once logged back in and positioned in the correct directory, running npm install again should successfully install all packages needed for operation.

• A production build of the application can be initiated with npm run build, which also sets up an SQLite database internally without needing an external database.

Restarting Services and Accessing Application

• After building, it's crucial to restart Nginx to apply new configurations using sudo service nginx restart.

• Finally, starting the server with npm run start allows access via Localhost or directly through the VPS IP address. The successful deployment of a Next.js app is confirmed as everything functions correctly online.