Full-Stack Blog Application with Spring Boot Backend and Secure Redux Frontend

With Next.js and TypeScript, you can build a secure, high-performance, SEO-friendly blog platform with minimal effort. This guide covers setting up Redux Toolkit, JWT authentication (admin only), and best practices for a clean, modular Next.js structure.

🚀 Why Next.js + TypeScript?

• Type safety and reduced runtime bugs
• Server-side rendering and SEO out of the box
• Built-in routing and performance optimizations
• Excellent DX (developer experience)

npx create-next-app@latest nextjs-blog --typescript
cd nextjs-blog
  

npm install @reduxjs/toolkit react-redux axios
npm install --save-dev @types/react-redux

NEXT_PUBLIC_API_URL=http://localhost:8080/api
  

📁 Project Folder Structure (Next.js + TypeScript + Redux + Spring Boot Backend)

nextjs-blog/
│
├── public/
│
├── src/
│   ├── app/
│   │   └── store.ts                        → Redux store setup
│
│   ├── api/
│   │   └── axiosInstance.ts               → Axios with JWT interceptors
│
│   ├── features/
│   │   ├── auth/
│   │   │   ├── authSlice.ts               → Login/logout JWT state
│   │   │   └── authAPI.ts                 → Auth endpoints
│   │   ├── posts/
│   │   │   ├── postSlice.ts               → Post list state
│   │   │   └── postAPI.ts                 → Post endpoints (CRUD)
│   │   ├── categories/
│   │   │   ├── categorySlice.ts
│   │   │   └── categoryAPI.ts
│   │   └── comments/
│   │       ├── commentSlice.ts
│   │       └── commentAPI.ts
│
│   ├── components/
│   │   ├── admin/
│   │   │   └── AdminSidebar.tsx           → Sidebar for admin panel
│   │   └── frontend/
│   │       ├── Navbar.tsx                 → Blog navigation
│   │       ├── PostCard.tsx               → Individual post display
│   │       └── CommentBox.tsx             → Comment input + list
│
│   ├── layouts/
│   │   ├── AdminLayout.tsx                → Admin UI container
│   │   └── FrontLayout.tsx                → Public blog layout
│
│   ├── auth/
│   │   └── PrivateRoute.tsx               → Admin route protection (JWT)
│
│   ├── middleware/                        → (Optional for edge auth)
│
│   ├── pages/
│   │   ├── _app.tsx                       → Wrap app with Redux Provider
│   │   ├── index.tsx                      → Blog homepage
│   │   ├── about.tsx                      → Static about page
│   │   ├── post/[id].tsx                  → Dynamic post view
│   │   ├── category/[id].tsx              → Filtered post view
│   │   └── admin/
│   │       ├── login.tsx                  → Admin login page
│   │       ├── dashboard.tsx              → Admin dashboard summary
│   │       ├── posts.tsx                  → Manage blog posts
│   │       ├── categories.tsx             → Manage categories
│   │       └── comments.tsx               → Moderate comments
│
├── tsconfig.json                          → TypeScript config
├── .env.local                             → API base, secrets
├── next.config.js                         → Next.js config
└── package.json                           → Dependencies
  

🧠 Setting Up Redux Toolkit in Next.js

store.ts

// src/app/store.ts
import { configureStore } from '@reduxjs/toolkit';
import authReducer from '../features/auth/authSlice';

export const store = configureStore({
  reducer: {
    auth: authReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
  

_app.tsx

// pages/_app.tsx
import { Provider } from 'react-redux';
import { store } from '../app/store';
import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}
export default MyApp;
  

🔐 Admin Authentication with JWT

authSlice.ts

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from '../../api/axiosInstance';

interface AuthState {
  token: string | null;
  status: 'idle' | 'loading' | 'succeeded' | 'failed';
  error: string | null;
}

const initialState: AuthState = {
  token: typeof window !== 'undefined' ? localStorage.getItem('token') : null,
  status: 'idle',
  error: null,
};

export const login = createAsyncThunk(
  'auth/login',
  async (credentials: { email: string; password: string }) => {
    const res = await axios.post('/auth/login', credentials);
    return res.data.token;
  }
);
  

🧾 Admin Pages (Protected)

• /admin/login.tsx → Login form
• /admin/dashboard.tsx → Summary and metrics
• /admin/posts.tsx → Manage posts
• /admin/comments.tsx → Approve comments

🌐 Frontend Pages (Public)

• /index.tsx → Home
• /post/[id].tsx → Post Details
• /category/[id].tsx → Category Filter
• /about.tsx → Static Info

✅ Deployment Tips

• Use Vercel for frontend hosting
• Deploy Spring Boot API on Render or Railway
• Store API base in .env.local as NEXT_PUBLIC_API_URL

🎯 Final Thoughts

With this setup, you now have a robust Next.js blog system with admin-only JWT protection, full Redux state management, and a flexible codebase ready for future expansion—image uploads, rich-text editor, comment replies, and beyond.