Nginx反向代理Next.js与React-Admin：React-Admin路径配置问题

Let’s walk through the fixes step by step to get your React-Admin dashboard loading correctly under the /admin path:

1. Configure React-Admin’s Router Base Path #

React-Admin uses React Router under the hood, so you need to explicitly tell it that it’s being served from /admin instead of the root domain. This ensures all internal routes and resource requests resolve to the right location.

In your main React-Admin entry file (typically src/App.js or src/index.js), add the basename prop to the <Admin> component:

import { Admin, Resource } from 'react-admin';
import { UserList } from './users'; // Your custom resource components

const App = () => (
  <Admin basename="/admin" dataProvider={yourDataProvider}>
    <Resource name="users" list={UserList} />
    {/* Add other resources here */}
  </Admin>
);

export default App;

2. Fix the Nginx proxy_pass Trailing Slash #

Your current Nginx config for /admin is missing a critical trailing slash at the end of the proxy_pass value. Without it, Nginx appends the full /admin/... path to the upstream URL instead of stripping /admin first.

Update your location /admin block like this:

location /admin {
    proxy_pass http://127.0.0.1:3001/;  # Added trailing slash here
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
    proxy_redirect off;
}

This change ensures a request like www.mydomainname.com/admin/dashboard gets forwarded to http://127.0.0.1:3001/dashboard (which matches React-Admin’s expected root routes) instead of http://127.0.0.1:3001/admin/dashboard.

3. Validate homepage and Build Configuration #

Setting "homepage": "/admin" in your React-Admin package.json is necessary, but you should pair it with a build-time environment variable to ensure static assets load correctly. If you’re using Create React App (common for React-Admin projects), update your build script:

{
  "scripts": {
    "build": "PUBLIC_URL=/admin react-scripts build"
  },
  "homepage": "/admin"
}

This guarantees CSS, JS, and image assets are served from /admin/static/... instead of the root domain.

4. Test the Updated Setup #

After making these changes:

1. Rebuild your React-Admin app with npm run build and restart its server.
2. Reload Nginx with sudo nginx -s reload.
3. Visit www.mydomainname.com/admin – your React-Admin dashboard should now load properly.

If you still see issues, check your browser’s DevTools Network tab for 404 errors on assets – this will help spot any remaining path mismatches to fix.

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