Sample: Frontend pages only
Overview
This example demonstrates how to configure your app for production to work exclusively with front-end pages. The middleware should be simplified by removing any unnecessary logic, particularly any logic related to backend pages.
Removing this disables the access to the instance's backend and should be done only to an environment that is meant to be public facing and needs its backend access restricted - like production for example. The idea here is that this approach allows for cleaner and faster processing of requests on the frontend and disables interactions with the backend on that instance. Content and widgets implementations should be handled in that environment via CI and CD and utilizing Sitefinity SiteSync.
PREREQUISITES: You must set up a Sitefinity renderer application and connect it to your Sitefinity CMS application. For more information, see Install Sitefinity in Next.js mode.
Removing backend middleware
To remove the backend middleware check from the middleware.ts file, remove the section below:
const resultBackend = await middlewareBackend(request);
if (resultBackend instanceof NextResponse || resultBackend instanceof Response) {
return resultBackend;
}
Full frontend only middleware sample
This is how the middleware.ts file looks like without the backend check:
Run the sample
This sample is available in Sitefinity’s GitHub repository. You can run and play with it.
To do this, perform the following:
- Go to Sitefinity’s GitHub repository Sitefinity Next.js samples.
- Expand Code and click Download ZIP.
- Extract the files on your computer.
- In the extracted folder, navigate to \nextjs-samples-main\nextjs-samples-main\src\fe-pages-only folder.
- In the command console run npm install.
- Open the
.env.development file.
- In section
PROXY SETTINGS, change the SF_CMS_URL property to the URL of your Sitefinity CMS site.
If you have deployed Sitefinity CMS on the IIS, point to https://localhost:<https_port>.
- If your Sitefinity CMS is hosted on the cloud, in
SF_LOCAL_VALIDATION_KEY= add your validation key. For more information, see Set up the project for local development (using Next.js Renderer).
- In the command console run
npm run dev.