Whether you're using
create-react-app, Next.js or even something non React based (like Angular), you'll come across the case where you write a Single Page Application (SPA) and need to support linking into a particular page.
Default webserver config doesn't really support this very well. eg.
If you have a page like
https://example.com/ and want to link directly to a users page like
https://example.com/users/ it typically will give you a 404 error as there is no
index.html in a users directory on the server. The cheapout option is to change your links from paths to anchors (eg.
https://example.com#users) but this is ugly, plus prevents you using them to link to a section on the page (ie. their intended usage).
So here's the config I came up with for my photography site.
The interesting parts of this are the
location / is what it makes all work, the
try_files directive basically says to attempt to serve it directly, then fall back with a
/ (ie. to serve an
index.html from a directory), then try a
html file with the same path name, finally just serve up the normal
index.html. This last step is what makes the SPA work, typically the main page will do your routing and looks at the URL to do it, beyond that it doesn't care where it's served from.