Use 'grocery Crud' with 'Nextjs'

Grocery CRUD Enterprise
1

can I use ‘grocery Crud’ with ‘Nextjs’ ? If Yes send me a example.

2

Hello @Matheus ,

Grocery CRUD is not available for ‘NextJS’ since this is a PHP library which is using ReactJS for the frontend part. Unless you are having somehow of a combination of PHP and NextJS in the project.

Regards
Johnny

3

hello, @johnny
so i can´t integrate with reactjs/nextjs
or using like api ?

4

Hello @Matheus ,

Yes you can use it as API but it is slightly more complicated. In fact this is the way that was implemented on the website for the demo pages :slight_smile: . For example: Full Example | Grocery CRUD v3 is loaded as an API with different URL and all of the JS files are loaded through another domain. At the website I’ve used a loader: https://demo-v3.grocerycrud.com/grocery-crud-v3-load.php which is loading the JS files and the configurations of Grocery CRUD (which they are not a lot anyway). But this is more or less coming from PHP. It is easier though for you to really just copy the output from PHP of the first page and just copy it to your React/NextJS project

So first of all I would suggest you to use setApiUrlPath | Grocery CRUD v3 to make sure that your PHP URL is not the same as the load of the page.

Second load Grocery CRUD in PHP as you would and copy the HTML of the page to your React/JS project. For example in my local I am getting this:

<div style="padding: 20px 10px;">
    <script>
    window.GroceryCrudConfiguration = window.GroceryCrudConfiguration || {};

    Object.assign(window.GroceryCrudConfiguration, {
        assetsUrl: 'http://your/url/path/',
        autoLoad: true,
    });

    
    </script>

<div class="grocery-crud" data-api-url="/grocery-crud/grocery-crud-3/grocery-crud-3-example/customers.php" data-landing-page-url="/grocery-crud/grocery-crud-3/grocery-crud-3-example/customers.php" data-theme="bootstrap-v5"data-unique-id="ed4cd4b61705c66a7c244cc83df54ec0" data-skin="dark" data-publish-events="true"></div>
</div>
    <script src="http://your/url/path//static/js/bundle.js"></script>
    <script src="http://your/url/path//static/js/vendors~main.chunk.js"></script>
    <script src="http://your/url/path/static/js/main.chunk.js"></script>

So basically whatever PHP will serve you (and make sure that it works first as PHP page), if you literally just copy the code that was exported (which is not much) then it should work. If the page is loaded from different host or port, make sure that you allow cross origin for your domains. Maybe you will also need to change the data-landing-page-url to serve the NextJS page.

Last but not least. I was thinking in the future to create a cloud service of Grocery CRUD so it won’t matter what technology you use (.NET, Python, NextJS, JavaScript, … e.t.c.) to load it. However I didn’t have enough people that wanted that. Would you be interested in such a project?

Hope it helped.

Regards
Johnny

5

Hello.
I have a job and this is my extra work (freelance).
Sure, i really always like this project.

i give you feedback if worked.