Our great sponsors
-
postman-app-support
Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster.
You can test it from the Thunder Client extension in VS Code, Postman or Insomnia. Whatever you wish! I like to use Thunder Client.
-
import Head from 'next/head'; import Image from 'next/image'; import styles from '../styles/Home.module.css'; export default function Home() { const createTest = async () => { const randomNum = Math.floor(Math.random() * 1000); const res = await fetch('/api/test/add', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ name: `Test ${randomNum}`, email: `test${randomNum}@test.com`, }), }); const data = await res.json(); console.log(data); }; return (
Create Next Apptitle> <meta name='description' content='Generated by create next app' /> <link rel='icon' href='/favicon.ico' /> Head> <main className={styles.main}> <button onClick={createTest}>Create Testbutton> <h1 className={styles.title}> Welcome to <a href='https://nextjs.org'>Next.js!a> h1> <p className={styles.description}> Get started by editing{' '} <code className={styles.code}>pages/index.jscode> p> <div className={styles.grid}>div> main> <footer className={styles.footer}> <a href='https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app' target='_blank' rel='noopener noreferrer' > Powered by{' '} <span className={styles.logo}> <Image src='/vercel.svg' alt='Vercel Logo' width={72} height={16} /> span> a> footer> div> ); } -
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
import Head from 'next/head'; import Image from 'next/image'; import styles from '../styles/Home.module.css'; export default function Home() { const createTest = async () => { const randomNum = Math.floor(Math.random() * 1000); const res = await fetch('/api/test/add', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ name: `Test ${randomNum}`, email: `test${randomNum}@test.com`, }), }); const data = await res.json(); console.log(data); }; return (
Create Next Apptitle> <meta name='description' content='Generated by create next app' /> <link rel='icon' href='/favicon.ico' /> Head> <main className={styles.main}> <button onClick={createTest}>Create Testbutton> <h1 className={styles.title}> Welcome to <a href='https://nextjs.org'>Next.js!a> h1> <p className={styles.description}> Get started by editing{' '} <code className={styles.code}>pages/index.jscode> p> <div className={styles.grid}>div> main> <footer className={styles.footer}> <a href='https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app' target='_blank' rel='noopener noreferrer' > Powered by{' '} <span className={styles.logo}> <Image src='/vercel.svg' alt='Vercel Logo' width={72} height={16} /> span> a> footer> div> ); } -
Here, we import the connectMongo function and our Test model that we created from the respective files. And the big comment I have at the top is JSDoc which can be used to provide autocomplete and typing in the IDE. You can omit it if you want.