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
This project uses the following libraries and services:
- Framework - Next.js
- UI Kit - Material UI
- Newsletter - Mailchimp
- Contact Form - Airtable
- Analytics - Google Analytics
- Hosting - Vercel
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.