## Decouple your application
Then, we will display the list of blogposts, fetched from Symfony routes, with links to each blogpost page.
### Add a relationship from `frontend` to `app`
As we don't want to expose our Symfony `app` API over HTTP, we will [define a relationship](https://docs.upsun.com/create-apps/multi-app/relationships.html#relationships-example) from `frontend` to `app`.
To define this relationship between applications, update your `.upsun/config.yaml` with the following:
```yaml title=".upsun/config.yaml" {6-9} theme={null}
applications:
app:
#...
frontend:
#...
relationships:
api:
service: "app"
endpoint: "http"
```
This will expose the `app` data in the `frontend` container, via an internal `api.internal` route (no more HTTP).
{post[0].content}
### Turn on Next.js production mode
As our homepage is displaying the list of blogposts, and we can navigate to read a blogpost, we can now switch Next.js to production mode.
Update your `.upsun/config.yaml` and add the following [environment variable configuration](https://docs.upsun.com/create-apps/app-reference/single-runtime-image.html#variables):
```yaml title=".upsun/config.yaml" {6-8} theme={null}
applications:
app:
#...
frontend:
#...
variables:
env:
NODE_ENV: production
```
### Deploy
Let's deploy our last updates by using the following:
```bash title="Terminal" theme={null}
git add frontend .upsun/config.yaml && git commit -m "Update homepage + add post page + production mode"
symfony push
symfony upsun:environment:url --primary
```
You should also see the following result from your preview environment:
Et voilà, we are done!
Our application is now using Next.js to display Symfony blogposts.
## Deploy to production
After checking that the`decouple-frontend` interface is looking great and meets your needs, you can [merge](https://docs.upsun.com/glossary.html#merge) `decouple-frontend` branch to the`main` branch, using the following command lines from the root of your project:
```bash title="Terminal" theme={null}
symfony merge
symfony checkout main
git pull upsun main
symfony upsun:environment:delete decouple-frontend
git fetch --prune
```
This will merge the `decouple-frontend` source code into the `main` branch and deploy it to production, and then delete `decouple-frontend` environment and corresponding Git branch.
Et voilà, your application has been decoupled in less than few minutes.
## Conclusion
By decoupling the frontend from the backend, you embrace a modern and modular architectural approach that offers greater flexibility in both development and deployment.
This separation allows each team to focus on their area of expertise while ensuring seamless integration through robust APIs.
In this tutorial, we explored how to set up a solution that leverages technologies like Symfony for the backend and Next.js for the frontend, all orchestrated on a platform like Upsun.
This approach provides optimized performance, improved scalability, and a faster development cycle.
Beyond the technical aspects, this methodology enhances the ability to adapt to market changes and user demands.
By separating responsibilities, you gain agility, security, and better maintainability for your applications.
Adopting a decoupled architecture is an investment in a strategy that promotes continuous innovation and the creation of high-quality user experiences.
## We would love your feedback!
Try it today and experience the difference!
👉 [Explore the Docs](https://docs.upsun.com)