Google Sheets & NextJS

Подписаться 1,7 тыс.

Просмотров 19 тыс.

50% 1

In this tutorial, learn how to build a form that save records into Google Sheets using NextJS & TailwindCSS.
🔗 Resources
- NextJS ([nextjs.org/](nextjs.org/))
- Google Spreadsheet API ([www.npmjs.com/package/google-...](www.npmjs.com/package/google-...)
- React ([reactjs.org/](reactjs.org/))
- TypeScript ([www.typescriptlang.org/](www.typescriptlang.org/))
- TailwindCSS ([tailwindcss.com/](tailwindcss.com/))
🎨 My Editor Settings
- PHPStorm (JetBrains)
- Material Deep Ocean Theme
- Atom Material Icons
🔖 Topics Covered
#NextJS
#GoogleSheets
#TailwindCSS
#React
#TypeScript
🛠 Equipment
Microphone ([amzn.to/3GmWZmc](amzn.to/3GmWZmc))
Dell Monitor ([amzn.to/3GmWZmc](amzn.to/3GmWZmc))
Macbook Pro ([amzn.to/3GmWZmc](amzn.to/3GmWZmc))
Logitech Camera ([amzn.to/3GcQoL5](amzn.to/3GcQoL5))
- Screenflow ([www.telestream.net/screenflow...](www.telestream.net/screenflow...)

Опубликовано:

2 фев 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 50

@CodyWilson11 2 года назад

Just want to say thanks for the amazing demonstration and complete walkthrough. I also adopted your google chrome new tab life counter. You've earned a sub.

@Realreal12345 Год назад

This was super helpful and saved me a bunch of time. Thank you!

@slamonega 2 года назад

Could you share a github repository of this example?

@himanshuagarwal7925 8 месяцев назад

Thank you very much exactly what i was looking for. Very helpful.

@yuenchen4882 2 года назад

Really helpful, thanks a lot!!!

@leveritablesamuel Год назад

Thanks so much! Great help 😃

@tumi_tigur 2 года назад

Great video, thanks a lot!

@ReiSodaSteven Год назад

Thanks for the tutorial.

@riceisgood81 6 месяцев назад

Thanks for this video! It was incredibly helpful in getting me unblocked at the Service Account auth step. As of today, it looks like the opts parameter is deprecated but everything inside the object is now its own parameter. I had to directly pass in credentials and scope. Also, with the new app router, you don’t need an API route. I was able to use the new Server Actions (“use server”).

@andreymorozow4225 Год назад

very cool, thank you!

@victordavilaamelinckx5284 7 месяцев назад

Awesome!

@tochukwungene 9 месяцев назад

Thank you!

@ArjunKrishna-r4b 19 дней назад

Thanks for helping!!!!

@lua.alvaro 10 месяцев назад

Muito obrigado my friend! Ajudou demais...

@jeremydudet 2 года назад

dude. this was a god send for me. Thank you

@KhoaTran-fr1jo 21 день назад

nice tut

@buckle42 5 месяцев назад

Would be so so so helpful if you could please post an update to this using Next.js 13's new src/app routing method for APIs. No one on the internet knows how to do this for some reason including stackoverflow :(

@wildchamo 3 месяца назад

i know how to do that! it isnt that dificult

@VMNthemaster 2 года назад

Hi there, first of all, thanks for the video, it worked for me I just wanted to ask that in my project, I have to create a new spreadsheet for every new set of data; how to do that?

@Jota.G 3 месяца назад

Thanks bro

@totiruiz5913 2 года назад

This was super helpful, thank you for your clear explanation and code example!

@mileicampeonmundial Год назад

how is the performance?

@ocrit285 11 месяцев назад

hi sir, can you update tutorial using the new next.js 13.4 with app dir?

@kzzesama1959 Год назад

is there any way to block users to post multiple requests in short time or does this api automatically blocks.

@patrycksilva4440 2 года назад

my sheet dont update when i do de request, help me

@sanjibsaau Год назад

Could you share a github this example

@dingleferry736 Год назад

Super helpful, thanks! I've been able to get this working locally, but when I try to deploy it through Vercel, I get hit with a POST error:500 every time I try to submit. Any suggestions on how I can troubleshoot this?

@alancoronado9835 Год назад

I am also getting this error, i think its because the public doesnt have access to GOOGLE_CLIENT_EMAIL, GOOGLE_PRIVATE_KEY, and GOOGLE_SHEET_ID. Though I still want the public to be able to send their data so I am a bit confused on what to do here without giving them that information. Did you figure it out?

@vanshvansh4360 11 месяцев назад

@@alancoronado9835same, did you figure it out ?

@ba55junke 5 месяцев назад

You need to add the .env.local vars to vercel in the settings > environment varilbles add the 3 from the .env.local and it should work.

@nocturnedev8034 Год назад

Hi I did the same think as you but I got code: 401, errors: [ { message: 'Invalid Credentials', domain: 'global', reason: 'authError', location: 'Authorization', locationType: 'header' } ]

@agustorres4281 2 года назад

Hi man, thanks a lot for this tutorial however when i deploy to vercel or heroku and click in the submit button the server response is 503 (service unavailable). Any help will be appreciated!

@itsbrex 2 года назад

I ran into the same issue with another project deployed on Vercel with the latest Vercel release. There was nothing in the change log but other people are having issues with POST requests in API routes. I was able to fix my issue (separate project) by switching it to GET request with query parameters, but that obviously wouldn’t work with a form submit.

@carlos__z Год назад

try adding NEXT_PUBLIC_ prefix to environment variables, that solved my issue in production with Vercel

@agustorres4281 Год назад

@@carlos__z Ok, i'll try it, thanks you!

@Michael-Martell 9 месяцев назад

@@agustorres4281yo don’t do that!!!

@hakimhamaili Год назад

The problem am having is it is not pushing data to the spreadsheet on production, all of my env vars are working fine and i do get logged that the data is there, but when i check its not pushed, i use vercel for host deployement

@ba55junke 5 месяцев назад

in vercel under settings > environment varibles add the stuff from your .env.local and it worked for me @hakimhamili

@ba55junke 5 месяцев назад

Did anyone sus out how to get this to work in vercel? cuz I am Hella stuck and whats the point??? if you can't make it work on the web?

@Michael-Martell 9 месяцев назад

This isn’t working anymore unfortunately… (atleast for me) it says api failed due to access control checks. On Google it says that Google may have removed access for service accounts. Or could it be a next 13 issue? The post request looks like it needs restructured. Anyone else get this working recently?