Next.js Portfolio Project – Installation Guide (Production Grade)

This document explains how I set up a production-grade Next.js portfolio website using modern best practices. It includes each installation question, the chosen answer, and the meaning of that choice.

1. Project Creation Command

npx create-next-app@latest akash-portfolio --ts --app --tailwind

What this does

• Creates a new Next.js project

• Enables TypeScript

• Uses the App Router

• Preconfigures Tailwind CSS

This is the recommended foundation for modern, scalable Next.js applications.

2. Installation Questions & Answers

During setup, Next.js asks several configuration questions. Below are the exact questions, selected answers, and why they matter.

❓ Which linter would you like to use?

Answer: ESLint

Meaning

• ESLint checks code quality and catches bugs early

• It enforces best practices for React, TypeScript, and Next.js

• Most widely used linter in the React ecosystem

Why ESLint

• Industry standard

• Excellent Next.js integration

• Recruiter-friendly and production-safe

❓ Would you like to use React Compiler?

Answer: Yes

Meaning

• Enables the new React Compiler for automatic performance optimizations

• Reduces unnecessary re-renders

• Removes the need for excessive useMemo and useCallback

Why Yes

• Safe for new projects

• Improves performance automatically

• Aligns with the future direction of React

❓ Would you like your code inside a src/ directory?

Answer: Yes

Meaning

• All application code lives inside the src/ folder

• Configuration files remain at the project root

Why Yes

• Cleaner project structure

• Scales better for large applications

• Standard practice in production-grade projects

Resulting structure:

akash-portfolio/
├─ src/
│  ├─ app/
│  ├─ components/
│  ├─ lib/
│  └─ styles/
├─ public/
├─ package.json
└─ tsconfig.json

❓ Would you like to customize the import alias?

Answer: Yes

❓ What import alias would you like configured?

Answer: @/*

Meaning

Allows absolute imports instead of relative paths.

Example

import Navbar from '@/components/layout/Navbar';

instead of:

import Navbar from '../../../components/layout/Navbar';

Why @/*

• Cleaner imports

• Easier refactoring

• Professional, readable code

• Common in large-scale projects

3. Final Setup Summary

This configuration represents a production-ready Next.js foundation suitable for:

• Personal portfolios

• SaaS products

• Blogs

• Enterprise web apps

4. Post-Installation Commands

After the setup completed successfully:

Install icon library

npm install lucide-react

Start development server

npm run dev

Open in browser

http://localhost:3000

5. Why This Setup Is Production Grade

• ✅ Clean project structure

• ✅ Strong type safety

• ✅ Performance optimizations enabled

• ✅ Industry-standard tooling

• ✅ Easy to scale (blog, subdomains, APIs)

This setup is suitable for professional portfolios and real-world applications.

6. Next Planned Steps (Future)

• Remove boilerplate pages

• Add portfolio sections (Hero, About, Projects, Skills, Contact)

• Add CV download support

• Deploy to Vercel

• Add blog on subdomain (blog.example.com) using MDX

7. Technology Stack

8. Folder Structure Explained

akash-portfolio/
├─ src/
│  ├─ app/                 # App Router pages
│  │  ├─ layout.tsx        # Root layout
│  │  ├─ page.tsx          # Home page
│  │  └─ globals.css       # Global styles
│  ├─ components/          # React components
│  │  ├─ layout/           # Layout components
│  │  ├─ sections/         # Page sections
│  │  └─ ui/               # Reusable UI components
│  ├─ lib/                 # Utilities and helpers
│  └─ styles/              # Additional styles
├─ public/                 # Static assets
│  ├─ images/
│  └─ cv/
├─ .eslintrc.json          # ESLint configuration
├─ tailwind.config.ts      # Tailwind configuration
├─ tsconfig.json           # TypeScript configuration
├─ next.config.ts          # Next.js configuration
└─ package.json            # Dependencies

9. Key Configuration Files

tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

This enables the @/ import alias.

next.config.ts

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  reactCompiler: true,
};

export default nextConfig;

This enables the React Compiler.

tailwind.config.ts

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

export default config;

This configures Tailwind to scan the src/ directory.

10. Development Workflow

Start development

npm run dev

Build for production

npm run build

Start production server

npm start

Run linter

npm run lint

11. Best Practices Implemented

1. TypeScript – Type safety throughout the application

2. ESLint – Code quality enforcement

3. Tailwind CSS – Utility-first styling

4. App Router – Modern Next.js routing

5. React Compiler – Automatic performance optimization

6. Absolute Imports – Clean, maintainable code

7. Structured Folders – Scalable architecture

12. Resources

• Next.js Documentation

• TypeScript Handbook

• Tailwind CSS Docs

• React Compiler Documentation

• Lucide React Icons

Author: Akash
Date: December 26, 2025
Purpose: Personal reference & future documentation
Project: Production-grade Next.js portfolio website

License

MIT License – Free to use for personal and commercial projects.

Changelog

v1.0.0 – Initial Setup

• ✅ Next.js 15 with TypeScript

• ✅ App Router configuration

• ✅ Tailwind CSS integration

• ✅ ESLint setup

• ✅ React Compiler enabled

• ✅ src/ directory structure

• ✅ @/* import alias

• ✅ Lucide React icons

End of Document