Static

Next14 Static Deploy

/* page.tsx */
export { metadata, viewport } from 'lib/seo';

const fetchData = async () => {
  const res = await fetch(
    `some-api`,
    {
      headers: {
        'Content-Type': 'application/json',
      },
      cache: 'force-cache', // next는 이 필드의 값에 따라 ssr과 ssg를 결정합니다.
    },
  );

  const jsonifyRes = (await res.json()) as {
    success: boolean;
    data: IData;
  };

  if (!jsonifyRes.success) {
    return [];
  }

  return jsonifyRes.data;
};

export default async function Treatment() {
  const data = await fetchData();

  return <Page data={data} />;
}

/* next.config.js */
/* eslint-disable */
const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');

const withVanillaExtract = createVanillaExtractPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  output: 'export',
  trailingSlash: true,
  reactStrictMode: true,
  compiler: {
    removeConsole: {
      exclude:
        process.env.NODE_ENV === 'production'
          ? ['error', 'info', 'warn']
          : ['log', 'error', 'info', 'warn', 'table'],
    },
  },
  webpack(config) {
    config.module.rules.push({
      test: /\\.svg$/i,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

module.exports = withVanillaExtract(nextConfig);

// next.config.js

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
  reactStrictMode: true,
  swcMinify: true,
  ...,
  webpack(config) {
    config.plugins.push(
      new CompressionPlugin({
        algorithm: 'gzip',
      }),
    );
    const fileLoaderRule = config.module.rules.find(rule =>
      rule.test?.test?.('.svg'),
    );
    config.module.rules.push(
      {
        ...fileLoaderRule,
        test: /\\.svg$/i,
        resourceQuery: /url/,
      },
      {
        test: /\\.svg$/i,
        issuer: /\\.[jt]sx?$/,
        resourceQuery: { not: /url/ },
        use: ['@svgr/webpack'],
      },
      {
        test: /\\.node/,
        use: 'raw-loader',
      },
    );
    fileLoaderRule.exclude = /\\.svg$/i;

    return config;
  },
  async rewrites() {
    return process.env.NODE_ENV === 'local'
      ? [
          {
            source: '/:path*',
            destination: `https://naver.com/:path*`,
          },
        ]
      : [];
  },
};

// nginx.conf
server {
  set $static '/www/dist';
  set $static_error '/www/error';
  listen 80 default_server; #80
  server_name _; #localhost
  root $static;
  
  location / {
    index index.html index.htm;
    try_files $uri.html $uri $uri/ @rewrites;
    error_page 405 = $uri;
  }
  
  location /NotSupport {
    alias $static_error;
  }
  
  location @rewrites {
    rewrite ^(.+)/(\\d+)$ $1/[id].html last;
    rewrite ^(.+)$ /index.html last;
  }
  
  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
    root /usr/share/nginx/html;
  }
}