Building a City Government Website with Next.js and Backend-for-Frontend Architecture

git clone https://github.com/Afrizal236/page-wisata-surabaya.go.id.git

# Primary backend API
API_URL=http://surabaya.go.id/api/

# WebDisplay API
API_URL_WEBDISPLAY=https://webdisplay.surabaya.go.id/api/

# Public image base URL (available in browser)
NEXT_PUBLIC_IMG=https://surabaya.go.id

# Internal backend URL (server-side only)
BASE_API_URL=http://<internal-ip>:<port>/api/v1/

# Security signature for backend authentication
SIGNATURE=<your-signature-hash>

# City identifier
SBY_ID=1
SURABAYA_SLUG=surabaya.go.id

// utils/axios.config.tsx
import axios, { AxiosInstance } from 'axios';

const axiosConfig = (useInternalApi: boolean): AxiosInstance => {
  const baseURL = useInternalApi
    ? process.env.BASE_API_URL
    : process.env.API_URL_WEBDISPLAY;

  return axios.create({
    baseURL,
    headers: {
      'Signature': process.env.SIGNATURE,
      'Content-Type': 'application/json',
    },
  });
};

// Use internal Surabaya backend
export const apiClient    = axiosConfig(true);

// Use WebDisplay backend
export const wdApiClient  = axiosConfig(false);

// pages/api/data/news.tsx
import type { NextApiRequest, NextApiResponse } from 'next';
import { apiClient } from '@/utils/axios.config';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    const { category, page = 1, limit = 10 } = req.query;

    const response = await apiClient.get('/news', {
      params: { category, page, limit },
    });

    res.status(200).json(response.data);
  } catch (error) {
    res.status(500).json({ message: 'Failed to fetch news' });
  }
}

// utils/services/news.tsx
import axios from 'axios';

export interface NewsParams {
  category?: string;
  page?: number;
  limit?: number;
}

export const getNewsList = async (params: NewsParams) => {
  const response = await axios.get('/api/data/news', { params });
  return response.data;
};

export const getNewsDetail = async (slug: string) => {
  const response = await axios.get(`/api/data/news/${slug}`);
  return response.data;
};

// pages/berita/index.tsx
import { useQuery } from '@tanstack/react-query';
import { getNewsList } from '@/utils/services/news';

const BeritaPage = () => {
  const { data, isLoading, isError } = useQuery({
    queryKey: ['news', { category: 'all', page: 1 }],
    queryFn:  () => getNewsList({ category: 'all', page: 1 }),
    staleTime: 5 * 60 * 1000, // cache for 5 minutes
  });

  if (isLoading) return <LoadingSpinner />;
  if (isError)   return <ErrorMessage />;

  return <NewsList articles={data.articles} />;
};

// pages/berita/[slug].tsx
import { GetServerSideProps } from 'next';
import { getNewsDetail } from '@/utils/services/news';

export const getServerSideProps: GetServerSideProps = async ({ params }) => {
  const slug = params?.slug as string;

  try {
    const article = await getNewsDetail(slug);
    return { props: { article } };
  } catch {
    return { notFound: true };
  }
};

// components/layout.tsx
import Header from './header';
import Footer from './footer';

interface LayoutProps {
  children: React.ReactNode;
}

const Layout = ({ children }: LayoutProps) => {
  return (
    <>
      <Header />
      <main>{children}</main>
      <Footer />
    </>
  );
};

version: "3.8"
services:
  surabaya-frontend:
    build: .
    container_name: surabaya-frontend
    ports:
      - "3005:3005"
    env_file:
      - .env.production
    volumes:
      - /media/HDNFS/surabaya/uploads/images:/app/public/images
    restart: always

# Stage 1: Dependencies
FROM node:18-alpine AS deps
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# Stage 2: Build
FROM node:18-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN yarn build

# Stage 3: Production runner
FROM node:18-alpine AS runner
WORKDIR /app
ENV NODE_ENV production
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/public ./public
EXPOSE 3005
CMD ["node", "server.js"]

// News: short cache, changes often
useQuery({
  queryKey: ['news'],
  queryFn: getNewsList,
  staleTime: 2 * 60 * 1000,  // 2 minutes
});

// Navigation menu: long cache, rarely changes
useQuery({
  queryKey: ['menu'],
  queryFn: getMenu,
  staleTime: 60 * 60 * 1000, // 1 hour
});

// headers.js — HTTP security headers
const securityHeaders = [
  { key: 'X-DNS-Prefetch-Control',  value: 'on' },
  { key: 'X-Frame-Options',         value: 'SAMEORIGIN' },
  { key: 'X-Content-Type-Options',  value: 'nosniff' },
  { key: 'Referrer-Policy',         value: 'strict-origin-when-cross-origin' },
];

module.exports = securityHeaders;