Next.js has emerged as one of the most popular frameworks for building modern web applications. Its features like server-side rendering, static site generation, and built-in API routes make it a go-to choice for developers. Whether you’re new to web development or transitioning from another framework, this guide will help you set up your first Next.js project and understand its fundamentals.
Why Choose Next.js?
Next.js provides several advantages that make it stand out:
File-Based Routing: Create routes simply by adding files to your project structure.
SEO Optimization: Built-in support for server-side rendering and metadata handling.
API Routes: Easily create backend logic within your app.
Performance: Automatic code splitting and image optimization.
Flexibility: Supports both static and server-rendered content.
Prerequisites
Before you start, ensure you have the following installed:
Node.js: Download Node.js if you don’t already have it.
npm or yarn: Comes with Node.js (choose one for managing packages).
Basic Knowledge of React: Helpful but not mandatory.
Step 1: Setting Up Your Next.js Project
Create a New Next.js App
Next.js provides a quick setup tool called create-next-app. Run the following command in your terminal:
npx create-next-app my-next-app
During the setup, you’ll encounter the following prompts:
Would you like to use TypeScript? No / Yes [Yes]
Would you like to use ESLint? No / Yes [Yes]
Would you like to use Tailwind CSS? No / Yes [Yes]
Would you like your code inside a `src/` directory? No / Yes [Yes]
Would you like to use App Router? (recommended) No / Yes [Yes]
Would you like to use Turbopack for `next dev`? No / Yes [Yes]
Would you like to customize the import alias (`@/*` by default)? No / Yes [No]
Install Dependencies: (in case)
If you didn’t install dependencies during the setup, run:
npm install
Start the Development Server
Launch your app locally:
npm run dev
Open http://localhost:3000 in your browser to view the default Next.js welcome page.
Step 2: Understanding the Folder Structure
When you open your Next.js project, you’ll see the following structure if you choose to use the src directory and App Router:
my-next-app/
├── src/
│ ├── app/
│ │ ├── (home)/
│ │ │ ├── aboutus/
│ │ │ │ └── page.tsx
│ │ │ ├── products/
│ │ │ │ └── page.tsx
│ │ │ ├── page.tsx // common page for home
│ │ │ └── layout.tsx // common layout for home
│ │ ├── (auth)/
│ │ │ ├── signup/
│ │ │ │ └── page.tsx
│ │ │ ├── signin/
│ │ │ │ └── page.tsx
| | ├── api/
│ │ │ └── accounts.tsx
│ │ │ └── products.tsx
| | ├── layout.tsx // common layout for app
├── public/ // Static assets
├── package.json
Key Folders:
app: Contains the App Router with structured routing using folders like aboutus and products.
api: Backend logic and APIs.
auth : Authentication logic
public: Store static assets like images and fonts.
Step 3: Creating Your First Route
Add a New Page
Inside the src/app/(home)/aboutus/ folder, create a file named page.tsx:
export default function AboutUs() {
return (
<div>
<h1>About Us</h1>
<p>This is the About Us page.</p>
</div>
);
}
Visit the Route
Navigate to http://localhost:3000/aboutus. You’ll see your new page in action!
You can style your pages using CSS files or CSS-in-JS libraries. Let’s add some basic styling:
Tailwind CSS (Recommended)
If not using Tailwind CSS , then :
Create a new CSS file in the src/app folder, e.g., src/app/globals.css:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #0070f3;
}
Import the CSS file in src/app/layout.tsx:
import "../globals.css";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
Step 5: Deploying Your Next.js App
Push Your Code to GitHub
Initialize a Git repository and push your code:
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin <your-repository-url>
git push -u origin main
Deploy on Vercel
Next.js is developed by Vercel, and deploying there is seamless:
Your app will be live with a custom URL!
Next Steps
Now that you’ve set up your first Next.js app, here are some areas to explore:
Dynamic Routes: Create routes with URL parameters.
API Routes: Build a full-stack app with backend logic.
Image Optimization: Use the next/image component.
Server-Side Rendering (SSR): Fetch data on the server for SEO benefits.
Conclusion
Next.js simplifies the process of building modern web applications with its powerful features and intuitive setup. By following this guide, you’ve taken the first step toward mastering Next.js. Keep experimenting, building, and exploring its capabilities—you’ll be amazed at what you can create!
Happy coding!
