isaiahdaviscom/client-rd

Custom Fades

Next + Netlify Starter

This is a Next.js v14 project bootstrapped with create-next-app and set up to be instantly deployed to Netlify!

This project is a very minimal starter that includes 2 sample components, a global stylesheet, a netlify.toml for deployment, and a jsconfig.json for setting up absolute imports and aliases. With Netlify, you'll have access to features like Preview Mode, server-side rendering/incremental static regeneration via Netlify Functions, and internationalized routing on deploy automatically.

(If you click this button, it will create a new repo for you that looks exactly like this one, and sets that repo up immediately for deployment on Netlify)

Table of Contents

• Next + Netlify Starter
  • Table of Contents
  • Getting Started
    • Installation options
  • Testing
    • Included Default Testing
    • Removing Renovate
    • Removing Cypress
  • Connect Netlify Forms to Google Gmail
    • 1 Set up a Netlify Site
    • 2. Create a Netlify Form
    • 3. Create a Netlify Serverless Function
    • 4. Install Dependencies
    • 5. Deploy Your Site
    • 6. Set Environment Variables
    • 7. Test Your Form

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

Installation options

Option one: One-click deploy

Option two: Manual clone

1. Clone this repo: git clone https://github.com/netlify-templates/next-netlify-starter.git
2. Navigate to the directory and run npm install
3. Run npm run dev
4. Make your changes
5. Connect to Netlify manually (the netlify.toml file is the one you'll need to make sure stays intact to make sure the export is done and pointed to the right stuff)

Testing

Included Default Testing

We’ve included some tooling that helps us maintain these templates. This template currently uses:

• Renovate - to regularly update our dependencies
• Cypress - to run tests against how the template runs in the browser
• Cypress Netlify Build Plugin - to run our tests during our build process

If your team is not interested in this tooling, you can remove them with ease!

Removing Renovate

In order to keep our project up-to-date with dependencies we use a tool called Renovate. If you’re not interested in this tooling, delete the renovate.json file and commit that onto your main branch.

Removing Cypress

For our testing, we use Cypress for end-to-end testing. This makes sure that we can validate that our templates are rendering and displaying as we’d expect. By default, we have Cypress not generate deploy links if our tests don’t pass. If you’d like to keep Cypress and still generate the deploy links, go into your netlify.toml and delete the plugin configuration lines:

[[plugins]]
  package = "netlify-plugin-cypress"
-  [plugins.inputs.postBuild]
-    enable = true
-
-  [plugins.inputs]
-    enable = false

If you’d like to remove the netlify-plugin-cypress build plugin entirely, you’d need to delete the entire block above instead. And then make sure sure to remove the package from the dependencies using:

npm uninstall -D netlify-plugin-cypress

And lastly if you’d like to remove Cypress entirely, delete the entire cypress folder and the cypress.config.ts file. Then remove the dependency using:

npm uninstall -S cypress

Connect Netlify Forms to Google Gmail

1 Set up a Netlify Site

If you don't have a Netlify site, create one by following the steps on the Netlify website.

2. Create a Netlify Form

Add a form to your HTML with the necessary input fields. Netlify will automatically handle form submissions.

<!-- index.html -->
<form name="contact" method="post" netlify>
  <label for="name">Name:</label>
  <input type="text" name="name" required>

  <label for="email">Email:</label>
  <input type="email" name="email" required>

  <label for="message">Message:</label>
  <textarea name="message" required></textarea>

  <button type="submit">Submit</button>
</form>

3. Create a Netlify Serverless Function

Create a functions folder at the root of your project. Inside it, create a file named sendEmail.js with the following code:

// functions/sendEmail.js
const nodemailer = require('nodemailer');

exports.handler = async function (event, context) {
  const data = JSON.parse(event.body);

  const transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
      user: '<your@gmail.com>', // your Gmail address
      pass: 'your-gmail-password', // your Gmail password or app-specific password
    },
  });

  const mailOptions = {
    from: '<your@gmail.com>',
    to: '<recipient@gmail.com>', // recipient's email address
    subject: 'New Form Submission',
    text: `Name: ${data.name}\nEmail: ${data.email}\nMessage: ${data.message}`,
  };

  try {
    await transporter.sendMail(mailOptions);
    return {
      statusCode: 200,
      body: JSON.stringify({ message: 'Email sent successfully' }),
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: JSON.stringify({ message: 'Error sending email' }),
    };
  }
};

4. Install Dependencies

Run the following command in your terminal to install the required Node.js packages:

npm install nodemailer

5. Deploy Your Site

Deploy your site to Netlify using the Netlify CLI or by connecting your Git repository to Netlify.

6. Set Environment Variables

In your Netlify site dashboard, go to "Settings" > "Build & deploy" > "Environment" and add the following environment variables:

GMAIL_USER: your Gmail address GMAIL_PASS: your Gmail password or app-specific password

7. Test Your Form

Submit a form on your site and check if the email is sent to the specified Gmail address.

Note: Storing sensitive information like passwords directly in your code or environment variables is not recommended. Consider using environment variables and a secure method for handling secrets in production environments.