In this tutorial, I will show you how to use https://stackblitz.com/ with a vercel online application.
You can test it on nextjsthreejs001.vercel.app and see the source code on my GitHub project.
You need to have one for each of these three accounts.
Use GitHub to create a new repo for your application.
Create a Next JS application on vercel for the first time and try to import it to your GitHub repo.
This can create two applications in the vercel online area.
You need to use the application that is linked to your GitHub repo.
Open your stackblitz account and you will see this:
Create a Next JS default project and from the left area of this interface link your GitHub account.
Now this new project will be filled with the vercel application using the import dialog:
If you run this project on the stackblitz online tool, then you maybe will see this error:
1 | error - Failed to download `Inter` from Google Fonts. Using fallback font instead. |
This is because the font cannot be found on this tool.
Just change this source code and refresh the project to run again.
1 2 3 4 5 6 7 | import Head from 'next/head'; import Image from 'next/image'; //import { Inter } from 'next/font/google'; import styles from '@/styles/Home.module.css'; //const inter = Inter({ subsets: ['latin'] }); const inter = ''; |
You can use this command in the terminal area:
1 | npm install && npx next dev |
On my stackblitz online editor, this works great.