https://github.com/harshmakadia/nextjs-airtable
Nextjs integration with Airtable via NocodeAPI
https://github.com/harshmakadia/nextjs-airtable
airtable airtable-api nextjs nocode
Last synced: about 2 months ago
JSON representation
Nextjs integration with Airtable via NocodeAPI
- Host: GitHub
- URL: https://github.com/harshmakadia/nextjs-airtable
- Owner: Harshmakadia
- License: mit
- Created: 2020-09-10T12:30:01.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-09-10T14:20:42.000Z (almost 6 years ago)
- Last Synced: 2025-03-03T03:24:55.255Z (over 1 year ago)
- Topics: airtable, airtable-api, nextjs, nocode
- Language: JavaScript
- Homepage: https://nextjs-airtable-mvp.vercel.app/
- Size: 118 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## 👉 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](https://nextjs.org)
- UI Kit - [Bootstrap](https://react-bootstrap.github.io)
- Hosting - [Vercel](https://vercel.com)
## 📚 Guide
Styles
You can edit Bootstrap 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 Bootstrap elements with custom style check the Bootstrap docs to see if you can do what need by tweaking a SASS variable.
Custom styles are located in their related component's directory. For example, if any custom style is applied to the Navbar component you'll find it in src/components/Navbar.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.
```js
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 component or with router.push()
return (
);
}
```
Deployment
Install the Vercel CLI
```
npm install -g vercel
```
Add each variable from `.env` to your Vercel project with the following command. You'll be prompted to enter its value and then choose one or more environments (development, preview, or production).
Learn more here.
```
vercel env add VARIABLE_NAME
```
Run this command to deploy a preview (for testing a live deployment)
```
vercel
```
Run this command to deploy to production
```
vercel --prod
```
See the Vercel docs for more details.