This is modified from a template Next.js project
bootstrapped with
create-next-app
,
to demonstrate how to combine Next.js with
deck.gl.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
Open http://localhost:3000 with your browser to see the result.
The default landing page from create-next-app
has only been slightly modified
to include a link to a /maps
page which will display internal map data with
deck.gl
. The base map requires a Mapbox API token which
should be saved in the root directory this repo in a file named .env.local
containing this:
NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=<my-token>
To re-create the whole project, start afresh somewhere else and follow these steps:
npx create-next-app@latest --typescript
- Make a
.env.local
file withNEXT_PUBLIC_MAPBOX_ACCESS_TOKEN
+ value npm install deck.gl react-map-gl mapbox-gl
mkdir src/data
+ copy data file across from this repomkdir src/pages/maps
+ copy 2 files across from this repo- Modify
src/pages.index.tsc
to insert link to "maps":import Link from 'next/link'
- Replace
<a></a>
with<Link></Link>
And that's it.