From ff69f00721291ca676c99fa05818c0500855e672 Mon Sep 17 00:00:00 2001 From: Vlada Skorohodova <94827090+vladaskorohodova@users.noreply.github.com> Date: Fri, 18 Oct 2024 12:25:37 +0400 Subject: [PATCH] DataSource: add a note about Next.js (#6724) (#6727) --- api-reference/30 Data Layer/DataSource/DataSource.md | 7 +++++++ .../20 Create a DevExtreme application with Next.js.md | 2 ++ 2 files changed, 9 insertions(+) diff --git a/api-reference/30 Data Layer/DataSource/DataSource.md b/api-reference/30 Data Layer/DataSource/DataSource.md index 47d5580582..46788e5674 100644 --- a/api-reference/30 Data Layer/DataSource/DataSource.md +++ b/api-reference/30 Data Layer/DataSource/DataSource.md @@ -85,6 +85,13 @@ dx.web.js, dx.viz.js, dx.all.js [/note] +--- +##### React + +[note] If you use DataSource with Next.js, add a [`use client` directive](https://nextjs.org/docs/app/building-your-application/rendering/client-components#using-client-components-in-nextjs) to ensure the instance is created on the client only. DataSource instances do not support React serialization and therefore cannot be created on the server and sent to the client. + +--- + Refer to the [Data Layer](/concepts/70%20Data%20Binding/5%20Data%20Layer '/Documentation/Guide/Data_Binding/Data_Layer/') and [DataSource Examples](/concepts/70%20Data%20Binding/51%20Data%20Source%20Examples '/Documentation/Guide/Data_Binding/Data_Source_Examples/') articles for more information on working with data in DevExtreme. #include datalayer-store-note-immutable with { name: "DataSource" } diff --git a/concepts/Common/Integration Guides/20 Create a DevExtreme application with Next.js/20 Create a DevExtreme application with Next.js.md b/concepts/Common/Integration Guides/20 Create a DevExtreme application with Next.js/20 Create a DevExtreme application with Next.js.md index 47422fe265..610b142901 100644 --- a/concepts/Common/Integration Guides/20 Create a DevExtreme application with Next.js/20 Create a DevExtreme application with Next.js.md +++ b/concepts/Common/Integration Guides/20 Create a DevExtreme application with Next.js/20 Create a DevExtreme application with Next.js.md @@ -115,6 +115,8 @@ The first `import` allows you to use the DataGrid component. The second applies ### Set up a Data Source +[note] If you use [DataSource](/Documentation/ApiReference/Data_Layer/DataSource/), add a [`use client` directive](https://nextjs.org/docs/app/building-your-application/rendering/client-components#using-client-components-in-nextjs) to ensure that the instance is created on the client only. DataSource instances do not support React serialization and therefore cannot be created on the server and sent to the client. + Our DataGrid requires a data source. For the purpose of this tutorial, we'll use data from the publicly available [Cat Facts API](https://catfact.ninja). Add the following asynchronous code to the `page.tsx` file: