This is a Next.js project bootstrapped with create-next-app
.
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.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Always use @emotion/styled
wherever possible. If regular CSS is required, use one of the following style files.
We manage our global styles in several files:
./styles/global-styles.tsx
(global stylesheet)./styles/fonts.css
(global @font-face rules)./styles/all.css
(global styles injected in at app root)./styles/theme.tsx
(global theme variables)./emotion.d.ts
(theme typings)
- The app has a "Maintenance Mode" (branded fullscreen takeover), simply set
IS_MAINT_MODE=true
, and the<Header/>
will disappear and<Home/>
gets taken over by<ComingSoon/>
. It's fun, try it! - All the data for the app comes in from our staging server on Heroku, but you can also run the dna-admin CMS+API locally (hint: login only works with a localhost API)
- To run against the local API, set the
SPREE_API_URL
environment variable to the local API host/port - Complains about missing
.next/build-manifest.json
are usually indications of anext
build error. Try running$(npm bin)/next build
to see the exact error.
POL Admin Interface & API http://dna-admin-dev.instinct.is/ http://dna-admin-staging.instinct.is/
POL Frontend Interface https://dna-frontend-dev.instinct.is/ https://dna-frontend-staging.instinct.is/
When there are lots of active changes occuring on this repo, make sure to regularly:
- Commit (or stash) your local changes on your branch
git fetch origin
git checkout main
git pull origin main
git checkout <your_branch>
git merge main
- Fix merge conflicts (if any)
git add .
git commit -m 'merge in latest main'
Done! …now you will be up-to-date with latest code. Do this before you submit your PR, and you can be sure it will be a clean merge.
https://localhost:8080/apidocs/swagger_ui#/
git remote add upstream git@github.com:1instinct/dna-frontend.git
git fetch upstream
git checkout main
git pull upstream main
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
- Flow / Type Checking
ReactSSR(NextJS)State Mgmt(hooks/useContext... no Redux, yet)Request Mgmt(React Query)Search(Fuse.js)- Pusher / API Integration
Styled Components(@emotion/styled)- Moving Letters
- UI Sounds (proprietary: "npm install beeper")
- Maps
- File upload (ReactDropzone)
Form validation (Formik)- Animations / Transitions (ReactSpring, GSAP)
- Gestures
- UI Alerts
- Uptime Monitoring
- Twilio
- Unit Testing
- Chat widget
- Chatbot (Rasa)
- Browser Feature Detection
- Speed/Performance Benchmarking (GTMetrix.com API?)
- Header tags customization (NextJS:
next/header
) Secrets management / Environment variables(dot-env
)