Next.js Portfolio with Redux & SSG

Build modern static portfolio websites using Next.js 16 with App Router, Redux Toolkit for state-driven content, TypeScript for type safety, and Tailwind CSS for mobile-first responsive styling.

Tech Stack

**Next.js 16** with App Router

**TypeScript** for type safety

**Redux Toolkit** for state management

**Tailwind CSS** for styling

**Static Site Generation (SSG)** - configured for static export

Core Instructions

1. Redux-Driven Content Architecture

**CRITICAL: ALL static text and images MUST be driven by Redux state, never hardcoded in components.**

Create a Redux slice for each content section in `lib/slices/`

Use `useAppSelector` and `useAppDispatch` from `@/lib/hooks` to interact with Redux

When adding new content, create or update the appropriate slice, not the component

Each slice should:

- Define its state interface

- Use `createSlice` from Redux Toolkit

- Export the slice reducer and action creators

- Keep initial state within the slice file

**Example Redux Slice:**

```typescript

import { createSlice } from '@reduxjs/toolkit';

interface ExperienceItem {

company: string;

role: string;

logo: string;

period: string;

}

interface ExperienceState {

title: string;

items: ExperienceItem[];

}

const initialState: ExperienceState = {

title: 'Experience',

items: [

{

company: 'Company Name',

role: 'Job Title',

logo: '/images/company-logo.png',

period: '2020 - Present'

}

]

};

export const experienceSlice = createSlice({

name: 'experience',

initialState,

reducers: {}

});

export default experienceSlice.reducer;

export type { ExperienceState, ExperienceItem };

```

2. Component Structure

Use **default exports** for all components

Add `'use client'` directive when component needs interactivity (useState, event handlers, etc.)

Place components in `components/` directory

Use TypeScript interfaces/types for all props and data structures

**Example Section Component:**

```typescript

'use client';

import { useAppSelector } from '@/lib/hooks';

import Image from 'next/image';

export default function Experience() {

const experience = useAppSelector((state) => state.experience);

return (

<h2 className="mb-8 text-3xl font-bold">{experience.title}</h2>

{experience.items.map((item, index) => (

<Image

src={item.logo}

alt={`${item.company} logo`}

width={72}

height={72}

className="h-full w-full rounded-lg object-contain"

</div>

<p className="text-zinc-600 dark:text-zinc-400">{item.company}</p>

<p className="text-sm text-zinc-500">{item.period}</p>

</div>

))}

</div>

</section>

);

}

```

3. Tailwind CSS Styling Conventions

**Mobile-First Responsive Design:**

Start with mobile styles, then add `sm:`, `md:`, `lg:` breakpoints

Support dark mode using `dark:` variants

Use zinc color palette (zinc-100, zinc-900, etc.)

**Standard Section Styling:**

Sections: `border-t-2 border-zinc-300 bg-white dark:border-zinc-700 dark:bg-black`

Container: `mx-auto max-w-6xl px-6 py-20`

Vertical spacing: `space-y-8`

**Responsive Layout Pattern:**

```tsx

<div className="flex-shrink-0 sm:mr-4">{/* Logo/Image */}</div>

<div className="flex-1 text-center sm:text-left">{/* Content */}</div>

</div>

```

**Common Tailwind Utilities:**

Mobile: `flex-col`, `items-center`, `text-center`

Desktop: `sm:flex-row`, `sm:items-start`, `sm:text-left`

Spacing: `gap-4`, `space-y-8`, `px-6`, `py-20`

Typography: `text-3xl`, `font-bold`, `text-zinc-600`

4. Image Handling

Store all images in `public/images/` directory

Use Next.js `Image` component from `next/image` for optimized images

Reference images with paths starting with `/images/` (e.g., `/images/avatar.jpg`)

Always provide descriptive `alt` text for accessibility

Use `object-contain` for logos that should maintain aspect ratio

Set appropriate `width` and `height` props

**Example:**

```tsx

import Image from 'next/image';

<Image

src="/images/company-logo.png"

alt="Company Name logo"

width={72}

height={72}

className="h-full w-full rounded-lg object-contain"

```

5. File Organization

```

app/ # Next.js app directory

├── layout.tsx # Root layout with Redux provider

├── page.tsx # Home page

└── globals.css # Global styles

components/ # React components

lib/ # Utilities and Redux setup

├── store.ts # Redux store configuration

├── hooks.ts # Typed Redux hooks

└── slices/ # Redux slices

public/ # Static assets

└── images/ # Image files

```

6. TypeScript Best Practices

Use strict TypeScript typing throughout

Define interfaces for all data structures

Use type imports: `import type { ... }` for types only

Export types from slice files for reuse in components

Avoid `any` type - use proper types

Prefer explicit return types for functions

7. Static Site Generation Configuration

Configure `output: 'export'` in `next.config.ts`

Set `images: { unoptimized: true }` for static export compatibility

Build output goes to `out/` directory

Do NOT use server-side features (API routes, server components with dynamic data)

**next.config.ts:**

```typescript

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {

output: 'export',

images: {

unoptimized: true

}

};

export default nextConfig;

```

8. ESLint Rules & Code Quality

**Run linting before commits:**

```bash

npm run lint

```

**Key ESLint Rules to Follow:**

React/Next.js:

Only call hooks at the top level (no hooks in conditionals/loops)

Include all dependencies in useEffect/useMemo/useCallback

Use Next.js `Image` component instead of `<img>`

Use Next.js `Link` component for internal links

Provide keys for all list items

TypeScript:

Remove unused variables and imports

Avoid `any` type - use proper types

Use explicit return types for functions

Avoid non-null assertions (`!`) - use proper null checks

General:

Use `const` for variables that don't change

Prefer arrow functions for callbacks

Remove `console.log` in production code

Use meaningful variable names

Keep functions small and focused

Accessibility:

Always provide `alt` text for images

Use semantic HTML elements

Ensure interactive elements are keyboard accessible

9. Adding New Content

**Step-by-step process:**

1. **Create or update Redux slice** in `lib/slices/`:

- Define state interface

- Set initial state with content

- Create slice with `createSlice`

- Export reducer and types

2. **Add slice to store** in `lib/store.ts`:

```typescript

import newSectionReducer from './slices/newSectionSlice';

export const store = configureStore({

reducer: {

// ... existing slices

newSection: newSectionReducer,

});

```

3. **Create component** in `components/`:

- Use `'use client'` if needed

- Import `useAppSelector` hook

- Select data from Redux state

- Implement responsive layout with Tailwind

4. **Add component to page** in `app/page.tsx`:

```typescript

import NewSection from '@/components/NewSection';

export default function Home() {

return (

{/* ... existing sections */}

</>

);

}

```

5. **Add images** to `public/images/` if needed

6. **Test responsive design** on mobile and desktop

7. **Run ESLint** and fix any warnings/errors

10. Common Patterns

**Redux Hook Usage:**

```typescript

import { useAppSelector } from '@/lib/hooks';

const data = useAppSelector((state) => state.sliceName);

```

**Typed Redux Hooks (lib/hooks.ts):**

```typescript

import { useDispatch, useSelector } from 'react-redux';

import type { RootState, AppDispatch } from './store';

export const useAppDispatch = useDispatch.withTypes<AppDispatch>();

export const useAppSelector = useSelector.withTypes<RootState>();

```

**Section with List Items:**

```tsx

{items.map((item, index) => (

{/* Item content */}

</div>

))}

</div>

```

11. Deployment

**Build command:**

```bash

npm run build

```

**Configuration:**

Output directory: `out/`

Node version: 20 (specify in `.nvmrc` and `package.json`)

Compatible with Cloudflare Pages, Netlify, Vercel static hosting

Workflow

1. **Plan content structure** - identify sections needed

2. **Create Redux slices** - define data structures and initial content

3. **Build components** - implement UI using Tailwind, consuming Redux state

4. **Add images** - place in `public/images/` and reference in slices

5. **Test responsiveness** - verify mobile, tablet, and desktop layouts

6. **Test dark mode** - ensure dark mode variants work correctly

7. **Run linter** - fix all ESLint errors and warnings

8. **Build for production** - `npm run build`

9. **Deploy** - upload `out/` directory to static hosting

Key Reminders

**Never hardcode content** - always use Redux state

**Mobile-first** - start with mobile styles, then add breakpoints

**Dark mode support** - use `dark:` variants for all colors

**Type safety** - define interfaces for all data structures

**Image optimization** - use Next.js `Image` component with proper dimensions

**Code quality** - run ESLint and fix warnings before committing

**Accessibility** - provide alt text, use semantic HTML, ensure keyboard navigation

Next.js Portfolio with Redux & SSG

Next.js Portfolio with Redux & SSG

Tech Stack

Core Instructions

1. Redux-Driven Content Architecture

2. Component Structure

3. Tailwind CSS Styling Conventions

4. Image Handling

5. File Organization

6. TypeScript Best Practices

7. Static Site Generation Configuration

8. ESLint Rules & Code Quality

9. Adding New Content

10. Common Patterns

11. Deployment

Workflow

Key Reminders

Reviews (0)