Next.js静态站点部署SiteGround后页面访问及刷新报错求助

Let's break down why you're seeing these errors and how to fix them step by step—since Vercel handles Next.js routing out of the box, but SiteGround's Apache server needs a little extra configuration to match.

1. First: Verify Your Static Export Setup #

The trailingSlash: true setting only works if you properly export your static site. Let's confirm you're doing this right:

• Double-check your next.config.js to make sure it's structured correctly (don't forget to import withImages):

  const withImages = require('next-images');
  
  module.exports = withImages({
    trailingSlash: true,
  });
  

• Run next build && next export in your project directory. This generates an out folder. Inside it, every subpage should be a folder with an index.html file (e.g., out/anylink/index.html).
• Critical: Upload all contents of the out folder directly to SiteGround's public_html directory—not the out folder itself. If you upload the folder, your site will be at temp.unmedesign.co/out/anylink instead of the root.

2. Fix Apache Routing with .htaccess #

The 403/500 errors happen because Apache doesn't know how to handle Next.js's clean URLs. Create or edit a .htaccess file in your public_html directory with these rules:

For trailingSlash: true Setup #

This config redirects non-trailing-slash URLs to their trailing-slash counterparts and serves the correct index.html for each route:

RewriteEngine On
RewriteBase /

# Redirect URLs without trailing slash to those with it
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !(.*)/$
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1/ [L,R=301]

# Serve index.html for all valid routes
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /$1/index.html [L]

If You Prefer No Trailing Slashes (Optional) #

If you decide to disable trailingSlash: true later, use this rule instead to direct all routes to the root index.html (works for single-page app style routing):

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

3. Check File Permissions #

403 errors often stem from incorrect file permissions. In SiteGround's File Manager:

• Set all static files (HTML, CSS, JS, images) to 644
• Set all folders to 755
  You can do this in bulk by selecting all files/folders, clicking "Change Permissions" in the top bar, and entering the values.

4. Test & Troubleshoot #

• After updating .htaccess, clear your browser cache and test direct access to subpages (e.g., https://temp.unmedesign.co/anylink/ with the trailing slash first)
• If you still get a 500 error, double-check your .htaccess for typos—even a missing bracket can break it. You can simplify the rule temporarily to test if Apache is reading the file (e.g., add a simple redirect to confirm).

Why does this work on Vercel? Vercel is built specifically for Next.js, so it automatically handles routing rules for both static and server-rendered pages. SiteGround uses a generic Apache server, which needs explicit instructions to map clean URLs to your static index.html files.

内容的提问来源于stack exchange，提问作者LEe Steve