👉 Get Started

Install dependencies

npm install

Update your .env file with values for each environment variable

API_KEY=AIzaSyBkkFF0XhNZeWuDmOfEhsgdfX1VBG7WTas
etc ...

Run the development server

npm run dev

When the above command completes you'll be able to view your website at http://localhost:3000

🥞 Stack

This project uses the following libraries and services:

• Framework - Next.js
• UI Kit - Bulma
• Newsletter - Mailchimp
• Contact Form - Google Sheets
• Analytics - Google Analytics
• Hosting - Vercel

📚 Guide

Styles

You can edit Bulma SASS variables in the global stylesheet located at src/styles/global.scss. Variables allow you to control global styles (like colors and fonts), as well as element specific styles (like button padding). Before overriding Bulma elements with custom style check the Bulma docs to see if you can do what need by tweaking a SASS variable.

Styles for each component are imported in the src/styles/components directory. For example, if any custom style is applied to the Navbar component you'll find it in src/styles/components/Navbar.scss. If you create a new component stylesheet make sure to also import it in src/styles/components/index.scss. We ensure custom styles are scoped to their component by prepending the classname with the component name (such as .Navbar__brand). This ensures styles never affect elements in other components. If styles need to be re-used in multiple components consider creating a new component that encapsulates that style and structure and using that component in multiple places.

Routing

This project uses the built-in Next.js router and its convenient useRouter hook. Learn more in the Next.js docs.

import Link from 'next/link';
import { useRouter } from 'next/router';

function MyComponent() {
  // Get the router object
  const router = useRouter();

  // Get value from query string (?postId=123) or route param (/:postId)
  console.log(router.query.postId);

  // Get current pathname
  console.log(router.pathname);

  // Navigate with the <Link> component or with router.push()
  return (
    <div>
      <Link href="/about"><a>About</a></Link>
      <button onClick={(e) => router.push("/about")}>About</button>
    </div>
  );
}

Deployment

Install the Vercel CLI

npm install -g vercel

Link codebase to a Vercel project

vercel link

Add each variable from your .env file to your Vercel project, including the ones prefixed with "NEXT_PUBLIC_". You'll be prompted to enter its value and choose one or more environments (development, preview, or production). See Vercel Environment Variables to learn more about how this works, how to update values through the Vercel UI, and how to use secrets for extra security.

vercel env add plain VARIABLE_NAME

Run this command to deploy to a unique preview URL. Your "preview" environment variables will be used.

vercel

Run this command to deploy to your production domain. Your "production" environment variables will be used.

vercel --prod

See Vercel Deployments for more details.

Other

This project was created using Divjoy, the React codebase generator. You can find more info in the Divjoy Docs.