> DOCUMENTATION

Next.js Installation Guide

Get your Next.js template running in minutes. App Router, SSR, image optimization, and deployment.

> Prerequisites

Before you begin, ensure you have the following installed:

Node.js 18.0+ — Download here
npm (comes with Node.js) or yarn or pnpm
A code editor like VS Code (recommended)
A modern web browser (Chrome, Firefox, Safari, or Edge)

To verify your installation:

terminal

node --version
npm --version

> Installation Steps

Step 1: Download Your Template

After downloading your template, extract the .zip file to your projects folder:

terminal

# Navigate to your projects directory
cd ~/Projects

# Extract the template (replace with your actual filename)
unzip aurora_spectrum_ai-technology-aurora-nextjs.zip
cd aurora_spectrum_ai-technology-aurora

Package Contents:

src/app/ — Next.js App Router pages (page.jsx per route)
src/components/ — Reusable UI components (Text, Button, Image, Link, etc.)
src/lib/data/ — Content data file (content.js)
src/styles/ — Global CSS (globals.css)
public/ — Static assets folder
next.config.js — Next.js configuration
tailwind.config.js — Tailwind CSS settings
package.json — Project dependencies

Step 2: Install Dependencies

Install all required packages using your preferred package manager:

Using npm (recommended):

terminal

npm install

Using yarn:

terminal

yarn install

Using pnpm (fastest):

terminal

pnpm install

What gets installed:

• Next.js 14.x (App Router)
• React 18.x
• Tailwind CSS
• Lucide React (icons)
• ESLint (code quality)
• PostCSS & Autoprefixer

Installation time: 1-3 minutes

Step 3: Start the Development Server

Launch the Next.js development server:

terminal

npm run dev

Or with yarn/pnpm: yarn dev / pnpm dev

Expected output:

▲ Next.js 14.1.0
- Local:        http://localhost:3000
- Network:      http://192.168.1.x:3000

✓ Ready in 2.5s

Features enabled:

• Fast Refresh — instant updates on save
• TypeScript support (if enabled)
• Automatic code splitting
• Image optimization
• Link prefetching

Step 4: View Your Site

Open your browser and navigate to:

http://localhost:3000

Your Next.js site is now running! Any changes you make will automatically appear in the browser.

> Building for Production

Create an optimized production build:

terminal

npm run build

This process:

1. Optimizes all code and assets
2. Generates static pages where possible
3. Creates optimized bundles
4. Outputs performance metrics

Then start the production server:

terminal

npm run start

Build output example:

Route (app)                Size     First Load JS
┌ ○ /                      1.2 kB         85.3 kB
├ ○ /about                 890 B          84.9 kB
└ ○ /contact               1.1 kB         85.2 kB

○ (Static)  automatically rendered as static HTML

> Deployment Options

Option 1: Vercel (Recommended for Next.js)

Easiest deployment — takes 2 minutes:

Push your code to GitHub/GitLab/Bitbucket
Go to vercel.com
Click "Import Project"
Select your repository
Click "Deploy" (Vercel auto-detects Next.js)

Your site is live! Get a free .vercel.app domain + automatic deployments.

Option 2: Netlify

terminal

npm run build
# Upload the .next/standalone folder to Netlify

Or connect your Git repository for automatic deployments.

Option 3: Self-Hosted (Docker)

Dockerfile

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
CMD ["npm", "start"]

Option 4: Static Export (for static hosting)

Only if you don't need server features:

1. Add to next.config.js:

next.config.js

module.exports = {
  output: 'export',
}

2. Build:

terminal

npm run build

3. Deploy the out/ folder to any static host (AWS S3, Cloudflare Pages, etc.)

> Customization Guide

Changing Colors & Branding

Edit tailwind.config.js:

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#0891B2',      // Your primary brand color
        secondary: '#F97316',    // Accent color
        accent: '#8B5CF6',       // Additional accent
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        display: ['Poppins', 'sans-serif'],
      },
    },
  },
}

Editing Page Content

Pages are located in src/app/:

src/app/
├── page.jsx                 # Home page (/)
├── layout.jsx              # Root layout (applies to all pages)
├── about/
│   └── page.jsx            # About page (/about)
└── contact/
    └── page.jsx            # Contact page (/contact)

Edit any page.jsx file to update content.

Adding New Pages

Create a new folder with a page.jsx file:

terminal

mkdir src/app/services
touch src/app/services/page.jsx

Example content:

page.jsx

// src/app/services/page.jsx
export default function ServicesPage() {
  return (
    <div>
      <h1>Our Services</h1>
      {/* Your content */}
    </div>
  );
}

Automatically available at: /services

Optimizing Images

Next.js includes automatic image optimization:

component.jsx

import Image from 'next/image';

<Image
  src="/images/hero.jpg"
  alt="Hero image"
  width={1200}
  height={600}
  priority // Load immediately for above-fold images
/>

Benefits:

• Automatic WebP/AVIF conversion
• Lazy loading by default
• Responsive image sizes
• No layout shift

> Troubleshooting

Error: Port 3000 is already in use

Option 1: Use a different port

terminal

PORT=3001 npm run dev

Option 2: Kill the existing process

terminal

# macOS/Linux
lsof -ti:3000 | xargs kill -9

# Windows
netstat -ano | findstr :3000
taskkill /PID <PID> /F

Error: FATAL ERROR: JavaScript heap out of memory

terminal

# Increase Node.js memory
export NODE_OPTIONS="--max-old-space-size=4096"
npm run build

# Windows:
set NODE_OPTIONS=--max-old-space-size=4096 && npm run build

Problem: Images return 404 or don't display

Verify image location: Images should be in /public/images/
Reference as /images/filename.jpg (no /public/ prefix)

For external images, add domains to next.config.js:

next.config.js

module.exports = {
  images: {
    domains: ['example.com', 'cdn.example.com'],
  },
}

Error: Text content does not match server-rendered HTML

Common cause: Using browser-only APIs during render

terminal

// WRONG
const Component = () => {
  const width = window.innerWidth; // undefined on server
  return <div>{width}</div>;
}

// CORRECT
'use client' // Add this directive
import { useEffect, useState } from 'react';

const Component = () => {
  const [width, setWidth] = useState(0);
  
  useEffect(() => {
    setWidth(window.innerWidth);
  }, []);
  
  return <div>{width || 'Loading...'}</div>;
}

Error: Cannot find module 'next/image'

terminal

# Remove and reinstall dependencies
rm -rf node_modules package-lock.json
npm install

# Or clear Next.js cache
rm -rf .next
npm run dev

Problem: Components appear unstyled

Verify tailwind.config.js content paths match your structure
Check src/app/globals.css has Tailwind imports
Verify globals.css is imported in src/app/layout.jsx
Restart the development server

> File Structure Reference

your-template/
├── src/
│   ├── app/                    # App Router
│   │   ├── layout.jsx          # Root layout
│   │   ├── page.jsx            # Home page (/)
│   │   ├── globals.css         # Global styles
│   │   ├── about/
│   │   │   └── page.jsx        # /about
│   │   └── contact/
│   │       └── page.jsx        # /contact
│   └── components/             # Reusable components
│       ├── Header.jsx
│       ├── Footer.jsx
│       ├── Button.jsx
│       └── Card.jsx
├── public/                     # Static assets
│   ├── images/
│   ├── fonts/
│   └── favicon.ico
├── next.config.js             # Next.js configuration
├── tailwind.config.js         # Tailwind CSS configuration
├── postcss.config.js          # PostCSS configuration
├── package.json               # Dependencies & scripts
└── .eslintrc.json            # ESLint configuration

> Available Scripts

Command	Description
`npm run dev`	Start development server (port 3000)
`npm run build`	Create optimized production build
`npm run start`	Start production server
`npm run lint`	Run ESLint to check code quality

> Performance Best Practices

1. Use the Image Component

Always use next/image instead of <img> for automatic optimization.

2. Implement Loading States

Create loading.jsx files for route segments.

3. Add Metadata for SEO

Export metadata object from page files.

4. Use Server Components

Default to Server Components, add 'use client' only when needed.

> Browser Support

Browser	Supported Versions
Chrome	Last 2 versions
Firefox	Last 2 versions
Safari	Last 2 versions
Edge	Last 2 versions
IE	Not supported

> Additional Resources

Next.js Documentation

Official docs and guides

App Router Guide

Modern routing with Next.js 14

Next.js Learn Course

Free interactive tutorial

Tailwind CSS Docs

Utility-first CSS framework

Estimated Setup Time: 5-10 minutes | Deployment Time: 2-5 minutes (with Vercel)

Next Steps: Customize your content, deploy, and launch.

← Back to Installation Guides React Guide Vue.js Guide SvelteKit Guide