Testing, Connect databases and Upload

This part of our content will demonstrate how to access your NocoDB and your CMS.

1. As listed before, obtain the API snippet and remember to replace `xc-auth` with `xc-token` that was previously.
2. For our example, let’s make a table. Feel free to populate it with anything you want.
3. Obtain the code API snippet from the right side of the UI
4. Over at your Next.js project, navigate to the `pages` folder and create or navigate to your index.js file.
5. This is a basic demonstration, so feel free to copy the code at the end and replace the ‘#’ sign with your `xc-token` and website link.
6. Feel free to open up your terminal and input `npm start` to have the site listed on your Localhost:3000
7. Press the button and your information should be populated
8. Open up your console terminal inside your browser and watch it populate

Once we’re done within our next.js application development. We can use our command prompt, access the Lyrid client, and “lc code submit” which will update the code in the Lyrid platform. And now we wait to see the results.

import { useState, useEffect } from “react”;

function HomePage() {

  const [nocodb_data, setData] = useState({});

  const [query_state, setQueryState] = useState(false);

  const fetchData = async () => {

    const options = {

      method: ‘GET’,

      headers: {

        ‘xc-token’: ‘######’  //Your xc-token entered here

      }

    };

                            // Your site listed here

    const data = await fetch(‘################’, options)

    // convert the data to json

    const json = await data.json();

    // set state with the result

    setData(json.list);

    setQueryState(!query_state);

    console.log(nocodb_data);

  }

  return (

    <div>

      Welcome to Next.js!

      <button onClick={fetchData}>Press me!</button>

      {query_state ? nocodb_data.map(({Id, Title}) => (<div key={Id}>{Title}</div>)) : <div></div>}

    </div>

    )

}

export default HomePage