Next.js is a powerful, open-source web development framework for building React-based web applications.
It was created by Vercel and offers key features like server-side rendering and static site generation, which improve performance, SEO, and developer experience.
Next.js simplifies complex aspects of web development by providing a structured framework with pre-configured tools and functionalities.
🚀 Getting Started with Next.js
Before you begin, ensure you have Node.js 18.18 or later installed on your system. The quickest and most recommended way to start a new Next.js project is by using create-next-app, which sets up everything for you automatically.
Step 1: Create a New Project
Open your terminal and run the following command. The command will prompt you with a series of questions to configure your project.
npx create-next-app@latest
Step 2: Understand the Project Structure
After the installation is complete, you’ll see a new directory with the following structure:
app/: This is the core directory for your application’s code. It’s where you’ll create pages, layouts, and components.public/: This folder is for static assets like images, fonts, and favicons. Files placed here can be accessed directly from the root URL (e.g.,http://localhost:3000/image.png).package.json: This file manages your project’s dependencies and scripts. The key scripts aredev,build, andstart.next dev: Starts the development server.next build: Creates a production build of your application.next start: Starts the Next.js production server.
Step 3: Run the Development Server
Navigate into your new project directory and run the development server.
cd my-next-app
npm run dev
Your Next.js application will now be running at http://localhost:3000.
🛣️ Next.js Routing: The App Router
Next.js uses a file-system-based router, which means your routes are automatically created based on the structure of your files and folders inside the app/ directory.
- Static Routes: A file named
page.js(or.tsx) inside a folder will be the entry point for that route. For example, a file atapp/about/page.jswill correspond to the/aboutURL. - Nested Routes: You can create nested routes by creating folders inside other folders. For example,
app/dashboard/settings/page.jswill correspond to/dashboard/settings. - Dynamic Routes: To create a route that accepts a dynamic parameter, wrap the folder name in square brackets, like
[slug]. For example,app/posts/[slug]/page.jswill handle URLs like/posts/my-first-postand/posts/another-post. You can access the dynamic parameter using theparamsprop in your component.
Linking Between Pages
Next.js provides the <Link> component for client-side navigation between pages. This component handles navigation efficiently and automatically prefetches the code for the linked page, making transitions feel instant.
import Link from 'next/link';
export default function Nav() {
return (
<nav>
<Link href="/">Home</Link>
<Link href="/about">About</Link>
</nav>
);
}
💻 Data Fetching Methods
Next.js offers a flexible approach to data fetching, allowing you to choose the best method for your use case.
1. Server Components (Default)
In the App Router, components are React Server Components by default. This allows you to fetch data directly within your components using async/await syntax. This data is fetched on the server, which can reduce client-side bundle size and improve performance.
// app/page.js
async function getData() {
const res = await fetch('https://api.example.com/data');
if (!res.ok) {
throw new Error('Failed to fetch data');
}
return res.json();
}
export default async function Page() {
const data = await getData();
return (
<main>
<h1>{data.title}</h1>
<p>{data.content}</p>
</main>
);
}
2. Client Components
If a component needs client-side interactivity or uses browser-only APIs (like useState, useEffect), it must be a Client Component. You declare a client component by adding the 'use client' directive at the top of the file. For data fetching in client components, you can use libraries like SWR or React Query for caching and state management.
// components/MyComponent.js
'use client'
import { useState, useEffect } from 'react';
export default function MyComponent() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then((res) => res.json())
.then((data) => setData(data));
}, []);
if (!data) return <p>Loading...</p>;
return <div>{/* Render data */}</div>;
}
🌐 API Routes
Next.js allows you to create API endpoints directly within your application by placing files in the app/api directory. These are serverless functions that can handle incoming HTTP requests (GET, POST, etc.), making it easy to build a full-stack application without a separate backend server.
Example: A simple GET API endpoint
Create a file at app/api/hello/route.js.
// app/api/hello/route.js
export async function GET(request) {
return new Response('Hello, Next.js!');
}
This API route will be available at http://localhost:3000/api/hello.
🚀 Deployment
The easiest way to deploy a Next.js application is with Vercel, the platform created by the developers of Next.js. Vercel automatically detects that your project is a Next.js app and optimizes the build and deployment process.
- Push your code to a Git repository (GitHub, GitLab, or Bitbucket).
- Create a Vercel account and import your project from your Git provider.
- Vercel will automatically build and deploy your application. You’ll get a unique URL to view your live site. Subsequent pushes to your Git repository will trigger a new automatic deployment.
Useful links below:
Let me & my team build you a money making website/blog for your business https://bit.ly/tnrwebsite_service
Get Bluehost hosting for as little as $1.99/month (save 75%)…https://bit.ly/3C1fZd2
Best email marketing automation solution on the market! http://www.aweber.com/?373860
Build high converting sales funnels with a few simple clicks of your mouse! https://bit.ly/484YV29
Join my Patreon for one-on-one coaching and help with your coding…https://www.patreon.com/c/TyronneRatcliff
Buy me a coffee 
https://buymeacoffee.com/tyronneratcliff
