Multiple JSON-LD nodes for the same page

I'm trying to do a proper JSON-LD markup for my page. I'm working on NextJS (injecting JSON-LD via dangerouslySetInnerHTML), so I inject raw stringified JSON into the render.

Let's say my page wants to be detected as an Organization first (in order to improve rich results), I go like this:

{
        "@context": "https://schema.org",
        "@type": "Organization",
        "name": "Name",
        "legalName": "Legal Name",
        "url": "https://example.com",
        ... other properties
}

But I'd like to include as well a "@type": "WebPage" and a "@type": "WebSite" nodes to describe the page itself.

How should I proceed? Do I have to separate the main nodes or just include WebSite and WebPage as subtypes?

I've seen people do the @graph approach to separate nodes, but I wonder if it's the best solution.

@graph is a good approach for entities that are not referenced by anything or are referenced from several places. You can list them all in one @graph instead of creating new scripts for each.

Some entities make more sense to be embedded inside other ones, like the address of an Organization. Or a WebPage could be part of (isPartOf) a WebSite.