[docs] Add integration, base concepts

[bharatkashyap]

• Closes [docs] Explain integration with existing apps better on the docs introduction #3988

https://deploy-preview-4080--mui-toolpad-docs.netlify.app/toolpad/core/introduction/base-concepts/

[apedroferreira]

Looks good! Just a couple of changes that seem important.
Also can you please usually add the preview URL to the PR description? It would really help to be able to review more easily!

[apedroferreira]

Aren't these already documented in the specific pages for the AppProvider?
If we're repeating it here it's also another part of documentation that we're going to keep up to date with any upcoming changes.

[apedroferreira]

Oh I see they're actually covered more in the DashboardLayout.
But maybe they could be described in the AppProvider documentation and we could link to there from here?
And keep this part in this page more generic and less specific to implementation?

[bharatkashyap]

We could do that to reduce maintenance load. The intention behind me doing this here is considering that this page could be something that a prospective user reads first before installing any components - so to make this document a "pitch", it should be the smoothest experience possible, which to me means fewer links, more inline demos. Let me know if that makes sense to you.

[apedroferreira]

I just think we can be a bit more generic here and not cover every AppProvider prop as extensively which is a bit too much information also... So just mentioning the most important things here: probably routing, theming, authentication... in a more general way. We can have code examples /demos too, just maybe condense and stick to the most important features as opposed to listing and describing every prop.

But it's also something we can discuss and do later if it's not super consensual.

[bharatkashyap]

Agree with covering it more generally and not overloading with information - you're right! I'll change this a bit

[prakhargupta1]

I agree with Pedro, I would even remove the one line explainers for each prop and directly show a code demo like below. It should give users the basic idea.

<AppProvider
              navigation={NAVIGATION}
              branding={BRANDING}
              session={session}
              theme={theme}
              authentication={AUTHENTICATION}
            >
              {props.children}
</AppProvider>

[apedroferreira]

This link is taking me to a 404 in the preview.

[bharatkashyap]

Looks good! Just a couple of changes that seem important. Also can you please usually add the preview URL to the PR description? It would really help to be able to review more easily!

Yep, my bad on this one! I think I was waiting for the deploy preview link to be available and then forgot to update the description when it was ready

[prakhargupta1]

Instead of linking to the base concepts page, I think we should link to the App Provider component page.

[Janpot]

Suggested change

	The Toolpad Core library is designed to work within your existing React application structure. The key component in this hierarchy is the `AppProvider`.
	The Toolpad Core library is designed to work under different React runtimes such as Next.js, vite, or even your custom setup. Many of its components rely on specific functionality of the runtime it's used under. For example: routing. The key component in making the components runtime aware is the `AppProvider` component.

[Janpot]

Maybe we can add that for Next.js you don't need to set this up yourself. We have an AppProvider exported from @toolpad/core/nextjs that already sets it up correctly.

[bharatkashyap]

I could add it as a separate callout from this info callout and draw specific attention to the @toolpad/core/nextjs export

[Janpot]

Looks good, added a few suggestions, but this seems mostly ready to go