- Next.js React used to connect to a GCP project excel sheet 'backend'
- Code from Fireship: Google Sheets… Your Next Database? with correction/user info.
- Note: to open web links in a new window use: ctrl+click on link
- Text from Google Docs Sheet displayed in simple table.
- Includes navigation from title to content page
- There is no styling
- React v17 Javascript library.
- Next v11 minimalist framework for rendering react apps on the server.
- Google APIs Node.js Client npm module v78 client library for using Google APIs.
- React dangerouslySetInnerHTML "is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous."
- Install dependencies using
npm i - Add GCP project credentials etc. as per tutorial
npm run devruns the Next app in the development mode. Open http://localhost:3000 to view it in the browser.npm run lintlints all files using ESLint - no warnings or errors
- N/A
- function to display the posts with link to content page
export default function Post({ posts }) {
return (
<article>
<h1>Posts</h1>
<ul>
{posts.map((v, i) => (
<li key={v}>
<Link href={`/posts/${i + 2}`}>
<a>{v}</a>
</Link>
</li>
))}
</ul>
</article>
);
}- Connecting to a GCP Docs Excel sheet using Next.js and not much code
- Status: Working
- To-Do: This could be expanded with pretty cards to display the data
- N/A
- Repo created by ABateman, email: [email protected]