DEV Community

Cover image for Complete NextJS Tutorial (with App router) - Modern App Development Guide
Rahul Giri
Rahul Giri

Posted on

Complete NextJS Tutorial (with App router) - Modern App Development Guide

#nextjs #typescript #react #frontend

Table of Contents

  1. What is NextJS and How It Helps in App Development
  2. NextJS with ReactJS Integration
  3. Creating Projects via Command Line
  4. Understanding next.config.js and next.config.ts
  5. Problems NextJS Solves vs Manual React Setup
  6. Webpack and Babel Under the Hood
  7. App Router - Page Identification and Rendering
  8. File Naming Conventions and Special Files
  9. SSR, SSG, and ISG with NextJS 14+
  10. Caching Strategies
  11. Link Component and Dynamic Loading

1. What is NextJS and How It Helps in App Development

Think of NextJS like a pre-built house foundation for your React applications. Instead of building everything from scratch (like laying bricks, installing plumbing, wiring), NextJS gives you a solid foundation so you can focus on decorating and making it beautiful.

What NextJS Really Is:
NextJS is a framework built on top of React that handles all the complex setup and configuration automatically. It's like having a skilled contractor handle all the technical stuff while you focus on building your actual application.

Real-World Benefits:

Example: Building an E-commerce Website

  • Without NextJS: You'd need to manually configure routing, set up server-side rendering for SEO, configure webpack, set up image optimization, create API endpoints, etc. This could take weeks.
  • With NextJS: You get all of this automatically. You can focus on building your product pages, shopping cart, and user experience.

Key Advantages:

  • SEO-Ready: Your pages load faster and search engines can read them easily
  • Performance: Images load faster, pages split automatically for quicker loading
  • Developer-Friendly: Less configuration, more coding your actual features
  • Production-Ready: Big companies like Netflix and TikTok trust it

2. NextJS with ReactJS Integration

Important: NextJS doesn't replace React - it enhances it. Think of React as the engine of a car, and NextJS as the complete car with steering wheel, brakes, GPS, and air conditioning.

You write the same React code you're familiar with, but NextJS adds superpowers to it.

Simple Example - A Blog Post Component:

// This is regular React code that works perfectly in NextJS
function BlogPost({ title, content, author }) {
  return (
    <article>
      <h1>{title}</h1>
      <p>By: {author}</p>
      <div>{content}</div>
    </article>
  )
}

export default BlogPost
Enter fullscreen mode Exit fullscreen mode

Using It in a NextJS Page:

// app/blog/page.jsx
import BlogPost from '../../components/BlogPost'

function BlogPage() {
  // This looks exactly like regular React
  const posts = [
    { 
      title: "Getting Started with NextJS", 
      content: "NextJS makes React development easier...", 
      author: "John Doe" 
    }
  ]

  return (
    <div>
      <h1>My Blog</h1>
      {posts.map((post, index) => (
        <BlogPost 
          key={index}
          title={post.title} 
          content={post.content} 
          author={post.author} 
        />
      ))}
    </div>
  )
}

export default BlogPage
Enter fullscreen mode Exit fullscreen mode

The magic is that NextJS automatically makes this page available at /blog URL without any routing configuration!

3. Creating Projects via Command Line

Step-by-Step Project Creation:

Step 1: Make sure you have Node.js installed

node --version  # Should show version 18.0 or higher
Enter fullscreen mode Exit fullscreen mode

Step 2: Create your NextJS project

# The easiest way - creates everything for you
npx create-next-app@latest my-awesome-website

# You'll be asked a few questions:
# ✔ Would you like to use TypeScript? › No / Yes
# ✔ Would you like to use ESLint? › No / Yes  
# ✔ Would you like to use Tailwind CSS? › No / Yes
# ✔ Would you like to use App Router? › Yes (recommended)
Enter fullscreen mode Exit fullscreen mode

Step 3: Navigate and start your project

cd my-awesome-website
npm run dev
Enter fullscreen mode Exit fullscreen mode

What You Get:

my-awesome-website/
├── app/                 # Your pages and layouts live here
│   ├── page.jsx        # Home page (shows at yoursite.com/)
│   ├── layout.jsx      # Wrapper that appears on every page
│   └── globals.css     # Global styles
├── public/             # Images, favicon, etc.
├── next.config.js      # NextJS configuration
└── package.json        # Project dependencies
Enter fullscreen mode Exit fullscreen mode

Real Example: After running npm run dev, visit http://localhost:3000 and you'll see your website running immediately!

4. Understanding next.config.js and next.config.ts

Think of next.config.js (or next.config.ts for TypeScript) as the control panel for your NextJS application. It's like the settings app on your phone - it controls how everything works behind the scenes.

Why next.config is Important:

Real-World Scenario: Imagine you're building a restaurant website:

  • You need to load images from your chef's Instagram
  • You want old menu URLs to redirect to new ones
  • You need to connect to your payment API
  • You want to optimize images for faster loading

The config file handles ALL of this:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Allow images from external sources (like Instagram, AWS, etc.)
  images: {
    domains: ['instagram.com', 'your-cdn.amazonaws.com'],
  },

  // Redirect old URLs to new ones automatically
  async redirects() {
    return [
      {
        source: '/old-menu',        // When someone visits /old-menu
        destination: '/menu',       // Send them to /menu instead
        permanent: true,
      },
    ]
  },

  // Add custom environment variables
  env: {
    RESTAURANT_NAME: 'Tony\'s Pizza',
    PAYMENT_API_URL: 'https://api.stripe.com',
  },
}

module.exports = nextConfig
Enter fullscreen mode Exit fullscreen mode

How It Helps You:

  1. Image Optimization: Instead of manually resizing images, NextJS does it automatically 
images: {
  domains: ['your-image-host.com'],  // Trust this image source
}
Enter fullscreen mode Exit fullscreen mode
  1. Environment Management: Keep secrets safe and organized 
env: {
  DATABASE_URL: process.env.DATABASE_URL,  // Use different databases for development/production
}
Enter fullscreen mode Exit fullscreen mode
  1. Performance Tuning: Make your site faster without complex webpack knowledge 
experimental: {
  appDir: true,  // Use the new faster App Router
}
Enter fullscreen mode Exit fullscreen mode

TypeScript Version (next.config.ts):

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  images: {
    domains: ['example.com'],
  },
  // TypeScript gives you autocomplete and error checking!
}

export default nextConfig
Enter fullscreen mode Exit fullscreen mode

The config file is like having a personal assistant that handles all the technical stuff while you focus on building your actual website features.

5. Problems NextJS Solves vs Manual React Setup

Think of it like this: Building a React app from scratch is like building a car from individual parts. NextJS is like buying a fully-functional car that you can customize.

Real-World Comparison:

Building a Simple Blog Website:

Manual React Way (The Hard Way):

# You need to install and configure everything manually:
npm install react react-dom
npm install webpack webpack-cli webpack-dev-server
npm install babel-loader @babel/core @babel/preset-react
npm install html-webpack-plugin css-loader style-loader
npm install react-router-dom  # For navigation
npm install express  # For server-side rendering
# ... and 20+ more packages

# Then create complex configuration files:
# webpack.config.js (100+ lines)
# babel.config.js
# .babelrc
# Server setup for SEO
# Routing configuration
# Build scripts
Enter fullscreen mode Exit fullscreen mode

NextJS Way (The Easy Way):

npx create-next-app@latest my-blog
cd my-blog
npm run dev
# Done! Everything works perfectly
Enter fullscreen mode Exit fullscreen mode

Specific Problems NextJS Solves:

1. Routing Problem:

// Manual React - You have to set up routes manually
import { BrowserRouter, Routes, Route } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/blog/:id" element={<BlogPost />} />
      </Routes>
    </BrowserRouter>
  )
}

// NextJS - Just create files in the right folders
// app/page.jsx → automatically becomes yoursite.com/
// app/about/page.jsx → automatically becomes yoursite.com/about
// app/blog/[id]/page.jsx → automatically becomes yoursite.com/blog/123
Enter fullscreen mode Exit fullscreen mode

2. SEO Problem:

// Manual React - Search engines see empty pages
// Google sees: <div id="root"></div>  (Not good for SEO!)

// NextJS - Search engines see full content
// Google sees: <h1>Welcome to My Blog</h1><p>Great content here...</p>  (Perfect for SEO!)
Enter fullscreen mode Exit fullscreen mode

3. Performance Problem:

// Manual React - Everything loads at once (slow)
import Home from './Home'
import About from './About'  
import Blog from './Blog'  // All components load immediately

// NextJS - Only loads what you need (fast)
// Each page loads only when visited, automatically!
Enter fullscreen mode Exit fullscreen mode

6. Webpack and Babel Under the Hood

Simple Explanation: Webpack and Babel are like translators and organizers for your code. NextJS includes them automatically so you don't have to worry about them.

What They Do:

Webpack = The Organizer

  • Takes all your JavaScript files, CSS, images and bundles them efficiently
  • Splits code so pages load faster (you don't need to download the entire app at once)

Babel = The Translator

  • Converts modern JavaScript to work in older browsers
  • Translates JSX (React code) to regular JavaScript

Real Example:

Your Code (What You Write):

// You write modern, clean code
const MyComponent = () => {
  return <div className="fancy-button">Click Me!</div>
}

export default MyComponent
Enter fullscreen mode Exit fullscreen mode

What Browsers Get (After NextJS Processing):

// NextJS automatically converts it to browser-friendly code
function MyComponent() {
  return React.createElement('div', {className: 'fancy-button'}, 'Click Me!')
}
Enter fullscreen mode Exit fullscreen mode

When You Might Need Custom Configuration:

Example: Adding Support for Special File Types

// next.config.js
module.exports = {
  webpack: (config) => {
    // Add support for importing .svg files as components
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack']
    })
    return config
  }
}

// Now you can do: import Logo from './logo.svg'
Enter fullscreen mode Exit fullscreen mode

The Beautiful Thing: 99% of the time, you never need to touch webpack or babel configuration. NextJS handles everything automatically!

7. App Router - Page Identification and Rendering

Think of App Router like organizing files on your computer. The folder structure directly becomes your website's URL structure.

How NextJS Identifies Pages:

Real Example - Building a Recipe Website:

app/
├── page.jsx                    # yoursite.com/ (Home page)
├── recipes/
│   ├── page.jsx               # yoursite.com/recipes (All recipes)
│   ├── italian/
│   │   └── page.jsx          # yoursite.com/recipes/italian
│   └── [recipe-name]/
│       └── page.jsx          # yoursite.com/recipes/pasta-carbonara
├── about/
│   └── page.jsx              # yoursite.com/about
└── contact/
    └── page.jsx              # yoursite.com/contact
Enter fullscreen mode Exit fullscreen mode

Dynamic Routes Example:

// app/recipes/[recipe-name]/page.jsx
// This single file handles ALL recipe pages!

export default function RecipePage({ params }) {
  // params.recipeName will be "pasta-carbonara" for /recipes/pasta-carbonara
  // params.recipeName will be "pizza-margherita" for /recipes/pizza-margherita

  return (
    <div>
      <h1>Recipe: {params['recipe-name']}</h1>
      <p>Loading recipe for {params['recipe-name']}...</p>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Catch-All Routes for Complex URLs:

// app/shop/[...categories]/page.jsx
// Handles: /shop/food/italian/pasta OR /shop/electronics/phones

export default function ShopPage({ params }) {
  // For /shop/food/italian/pasta
  // params.categories = ['food', 'italian', 'pasta']

  return (
    <div>
      <h1>Shopping in: {params.categories.join(' → ')}</h1>
      {/* Shows: Shopping in: food → italian → pasta */}
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Parallel Routes - Advanced Feature:

Imagine you want to show different content in different sections of the same page:

app/dashboard/
├── page.jsx              # Main dashboard content
├── @stats/
│   └── page.jsx         # Statistics section  
└── @notifications/
    └── page.jsx         # Notifications section
Enter fullscreen mode Exit fullscreen mode 
// app/dashboard/layout.jsx
export default function DashboardLayout({ children, stats, notifications }) {
  return (
    <div className="dashboard">
      <main>{children}</main>          {/* Main content */}
      <aside>{stats}</aside>           {/* Statistics */}
      <div>{notifications}</div>       {/* Notifications */}
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

This lets you load different data for each section independently!

8. File Naming Conventions and Special Files

Think of these special files as different rooms in a house, each with a specific purpose.

Core Files Everyone Should Know:

1. page.jsx - The Main Room

// app/blog/page.jsx
// This is what visitors see when they go to yoursite.com/blog

export default function BlogPage() {
  return (
    <div>
      <h1>Welcome to My Blog</h1>
      <p>Here are my latest posts...</p>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

2. layout.jsx - The Frame of the House

// app/blog/layout.jsx  
// This wraps around ALL pages in the /blog section

export default function BlogLayout({ children }) {
  return (
    <div>
      <nav>
        <a href="/blog">All Posts</a>
        <a href="/blog/categories">Categories</a>
      </nav>

      <main>
        {children}  {/* This is where page.jsx content appears */}
      </main>

      <footer>© 2024 My Blog</footer>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

3. loading.jsx - The "Please Wait" Sign

// app/blog/loading.jsx
// Shows while the blog page is loading

export default function Loading() {
  return (
    <div>
      <p>Loading awesome blog posts...</p>
      <div className="spinner"></div>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

4. error.jsx - The "Something Went Wrong" Handler

// app/blog/error.jsx
'use client'  // This line is important for error pages

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Oops! Something went wrong</h2>
      <p>Error: {error.message}</p>
      <button onClick={() => reset()}>
        Try Again
      </button>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

5. not-found.jsx - The "Page Doesn't Exist" Page

// app/not-found.jsx
// Shows when someone visits a page that doesn't exist

export default function NotFound() {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>Sorry, we couldn't find the page you're looking for.</p>
      <a href="/">Go back home</a>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

API Routes - Your Backend in the Same Project:

// app/api/contact/route.js
// Handles POST requests to yoursite.com/api/contact

export async function POST(request) {
  const { name, email, message } = await request.json()

  // Send email, save to database, etc.
  console.log(`New contact from ${name}: ${message}`)

  return Response.json({ success: true })
}
Enter fullscreen mode Exit fullscreen mode

Metadata for SEO:

// app/blog/[slug]/page.jsx
export async function generateMetadata({ params }) {
  // This runs before the page loads to set the <title> and description
  const post = await fetchBlogPost(params.slug)

  return {
    title: `${post.title} - My Blog`,
    description: post.summary,
    openGraph: {
      title: post.title,
      description: post.summary,
      images: [post.coverImage],
    },
  }
}

export default function BlogPost({ params }) {
  // Your blog post component
}
Enter fullscreen mode Exit fullscreen mode

9. SSR, SSG, and ISG with NextJS 14+

Think of these like different ways to prepare a meal:

  • SSR (Server-Side Rendering): Like a restaurant - food is cooked fresh when you order
  • SSG (Static Site Generation): Like a frozen dinner - prepared ahead of time, reheated when needed
  • ISR (Incremental Static Regeneration): Like a buffet - prepared ahead but refreshed periodically

SSR - Fresh Content Every Time:

Use Case: News website, user dashboards, real-time data

// app/news/page.jsx
async function getLatestNews() {
  const response = await fetch('https://api.news.com/latest', {
    cache: 'no-store'  // This makes it Server-Side Rendered
  })
  return response.json()
}

export default async function NewsPage() {
  const news = await getLatestNews()  // Fetches fresh data on every visit

  return (
    <div>
      <h1>Latest News</h1>
      {news.map(article => (
        <div key={article.id}>
          <h2>{article.title}</h2>
          <p>Published: {article.publishedAt}</p>
          <p>{article.summary}</p>
        </div>
      ))}
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

SSG - Pre-built for Speed:

Use Case: Documentation, blogs, marketing pages

// app/docs/page.jsx
async function getDocs() {
  const response = await fetch('https://api.docs.com/all', {
    cache: 'force-cache'  // This makes it Static Site Generated
  })
  return response.json()
}

export default async function DocsPage() {
  const docs = await getDocs()  // This runs at BUILD time, not when users visit

  return (
    <div>
      <h1>Documentation</h1>
      {docs.map(doc => (
        <div key={doc.id}>
          <h2>{doc.title}</h2>
          <p>{doc.description}</p>
        </div>
      ))}
    </div>
  )
}

// Pre-generate specific pages
export async function generateStaticParams() {
  const docs = await fetch('https://api.docs.com/all').then(res => res.json())

  return docs.map((doc) => ({
    slug: doc.slug,  // Creates /docs/getting-started, /docs/api-reference, etc.
  }))
}
Enter fullscreen mode Exit fullscreen mode

ISR - Best of Both Worlds:

Use Case: E-commerce products, blog posts, any content that changes occasionally

// app/products/page.jsx
async function getProducts() {
  const response = await fetch('https://api.store.com/products', {
    next: { revalidate: 3600 }  // Rebuild page every hour (3600 seconds)
  })
  return response.json()
}

export default async function ProductsPage() {
  const products = await getProducts()

  return (
    <div>
      <h1>Our Products</h1>
      {products.map(product => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <p>${product.price}</p>
          <p>In stock: {product.inventory}</p>
        </div>
      ))}
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

When to Use Which:

Scenario Use Why
User dashboard with personal data SSR Data is different for each user
Company about page SSG Content rarely changes, should be fast
Product catalog ISR Products change occasionally, but speed matters
News feed SSR Content changes constantly
Blog posts ISR New posts added occasionally

10. Caching Strategies

Think of caching like keeping snacks in your kitchen instead of going to the store every time you're hungry.

Automatic Caching - NextJS Does This For You:

// NextJS automatically caches identical requests
async function getUser(id) {
  const response = await fetch(`/api/users/${id}`)
  return response.json()
}

export default async function UserProfile({ userId }) {
  const user = await getUser(userId)        // First API call
  const userAgain = await getUser(userId)   // NextJS uses cached result automatically

  return <div>Hello, {user.name}!</div>
}
Enter fullscreen mode Exit fullscreen mode

Manual Cache Control:

// Cache for 1 hour - good for product prices
const products = await fetch('/api/products', {
  next: { revalidate: 3600 }  // 3600 seconds = 1 hour
})

// Never cache - good for user-specific data
const userDashboard = await fetch('/api/dashboard', {
  cache: 'no-store'
})

// Cache forever - good for static content
const companyInfo = await fetch('/api/company', {
  cache: 'force-cache'
})
Enter fullscreen mode Exit fullscreen mode

Real-World Example - E-commerce Site:

// app/products/[id]/page.jsx
async function getProduct(id) {
  // Product details don't change often - cache for 24 hours
  const product = await fetch(`/api/products/${id}`, {
    next: { revalidate: 86400 }  // 24 hours
  })
  return product.json()
}

async function getProductReviews(id) {
  // Reviews change frequently - always get fresh data
  const reviews = await fetch(`/api/products/${id}/reviews`, {
    cache: 'no-store'
  })
  return reviews.json()
}

export default async function ProductPage({ params }) {
  const [product, reviews] = await Promise.all([
    getProduct(params.id),     // Cached
    getProductReviews(params.id)  // Always fresh
  ])

  return (
    <div>
      <h1>{product.name}</h1>
      <p>Price: ${product.price}</p>

      <div>
        <h2>Customer Reviews</h2>
        {reviews.map(review => (
          <div key={review.id}>
            <p>{review.comment}</p>
            <span>Rating: {review.rating}/5</span>
          </div>
        ))}
      </div>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Cache Tags for Precise Control:

// Tag your cache entries
const posts = await fetch('/api/posts', {
  next: { tags: ['posts'] }
})

// Later, invalidate just the posts cache when you add a new post
// This can be done in your API route:
// revalidateTag('posts')
Enter fullscreen mode Exit fullscreen mode

11. Link Component and Dynamic Loading

Link Component - Navigation Made Right:

Think of Link like a smart GPS that preloads the destination before you even click.

import Link from 'next/link'

export default function Navigation() {
  return (
    <nav>
      {/* Regular HTML link - causes full page reload */}
      <a href="/about">About (Slow)</a>

      {/* NextJS Link - instant navigation */}
      <Link href="/about">About (Fast)</Link>

      {/* Dynamic links */}
      <Link href={`/products/${productId}`}>
        View Product
      </Link>

      {/* External links - automatically detected */}
      <Link href="https://google.com">
        Google (opens normally)
      </Link>
    </nav>
  )
}
Enter fullscreen mode Exit fullscreen mode

Advanced Link Features:

import Link from 'next/link'

export default function BlogList({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <Link 
          key={post.id}
          href={`/blog/${post.slug}`}
          className="blog-link"
          prefetch={false}  // Don't preload unless hovered
        >
          <div>
            <h2>{post.title}</h2>
            <p>{post.excerpt}</p>
          </div>
        </Link>
      ))}
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Dynamic Loading - Load Components When Needed:

Use Case: You have a heavy component that not all users will see.

import { useState } from 'react'
import dynamic from 'next/dynamic'

// Load the chart component only when needed
const HeavyChart = dynamic(() => import('../components/Chart'), {
  loading: () => <p>Loading chart...</p>,
  ssr: false  // Don't render on server (good for charts that need browser APIs)
})

export default function Dashboard() {
  const [showChart, setShowChart] = useState(false)

  return (
    <div>
      <h1>Dashboard</h1>
      <button onClick={() => setShowChart(true)}>
        Show Analytics Chart
      </button>

      {showChart && <HeavyChart />}
      {/* Chart code only downloads when user clicks the button! */}
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Dynamic Imports for Different Scenarios:

// Load component with custom loading
const VideoPlayer = dynamic(() => import('../components/VideoPlayer'), {
  loading: () => <div>Loading video player...</div>
})

// Load specific export from a file
const SpecialButton = dynamic(() => import('../components/Buttons').then(mod => mod.SpecialButton))

// Conditional loading based on user permissions
const AdminPanel = dynamic(() => import('../components/AdminPanel'), {
  ssr: false  // Only load in browser, not on server
})

export default function UserProfile({ user }) {
  return (
    <div>
      <h1>Welcome, {user.name}</h1>

      <VideoPlayer src="/welcome-video.mp4" />

      {user.isAdmin && <AdminPanel />}
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Real-World Performance Example:

// app/blog/[slug]/page.jsx
import dynamic from 'next/dynamic'

// Load comments only when user scrolls down
const CommentSection = dynamic(() => import('../../../components/CommentSection'), {
  loading: () => <div>Loading comments...</div>
})

// Load share buttons only when article is fully read
const ShareButtons = dynamic(() => import('../../../components/ShareButtons'))

export default function BlogPost({ params }) {
  return (
    <article>
      <h1>My Blog Post</h1>
      <p>Article content here...</p>

      {/* These load instantly */}
      <div className="article-content">
        {/* Main content */}
      </div>

      {/* These load when needed, keeping initial page fast */}
      <ShareButtons />
      <CommentSection postId={params.slug} />
    </article>
  )
}
Enter fullscreen mode Exit fullscreen mode

This approach makes your initial page load much faster because heavy components only download when they're actually needed!

Conclusion

NextJS transforms React development from a complex setup process into a smooth, production-ready experience. By handling routing, optimization, SEO, and performance automatically, it lets you focus on building great user experiences rather than wrestling with configuration.

The key is to start simple - create pages by adding files to the app directory, use the built-in Link component for navigation, and gradually explore advanced features like SSR, caching, and dynamic loading as your application grows.

Remember: NextJS is React with superpowers, not a replacement for React. Everything you know about React still applies - NextJS just makes it better.

Top comments (1)

Collapse
 
theoephraim profile image
Theo Ephraim •

using env in your config is no longer recommended (see nextjs.org/docs/app/api-reference/...)

For a full-featured env var solution, take a look at varlock.dev and the drop-in next integration.