This project is the frontend application (next.js hosted on Vercel) of a Headless blog using Strapi as CMS (hosted on Heroku), including image management.
This starter is based on Next.js Blog Starter and was create to be an option of starter with Styled Components + TypeScript.
Click here to view the frontend project demo.
Click here To see the backend project repository.
The photos are from Unsplash and Strapi.
-
Son Goku by Jeet Dhanoa
-
Cappuccino by Nathan Dumlao
-
Xbox joystick by Javier Martínez
-
Playstation controlers by Igor Karimov
-
Flat screen monitor and black ceramic mug by Tudor Baciu
-
Sunset by Dave Hoefler
-
Boats in Lake by Luca Bravo
-
Amazon Echo and lamp by Leon Dewiwje
-
Mr. Meeseeks by Jakub Dziubak
-
Legend of Zelda action figures by Ryan Quintal
-
Vue.js code by Emil Priver
-
Bird at snow by Dennis Buchner
-
Git branch by Yancy Min
-
Strapi image by Strapi Blog
Clone the repository:
git clone [email protected]:nicklima/strapi-blog-frontend-next.git
Navigate to the project directory
cd strapi-blog-frontend-next
and install the dependencies:
yarn
# or
npm install
After install the dependencies, you can run the app in the development mode.
Open http://localhost:3000 to view it in the browser.
Remember that you will need to set the URL of your Strapi project in your environment variables.
If you want, you can download our Strapi CMS repository, install its dependencies and run the yarn develop command and use the url of localhost in your .env file
NEXT_PUBLIC_STRAPI_API_URL=http://localhost:1337
After downloading the CMS Strapi code and installing the dependencies, run the yarn develop command to run the local environment.
Remember to keep the CMS environment running in another terminal tab and then run the command to run the local environment of the frontend of our application.
yarn dev
# or
npm run dev
After install the dependencies, you can build the app for production to the .next folder.\
npm run build
# or
yarn build
Your app is ready to be deployed!
Visit https://nextjs.org/learn to get started with Next.js or visit https://nextjs.org/docs to view the full documentation.
Check the Strapi quick start to get started with Strapi or visit Strapi Docs to view the full documentation.
MIT © Nick Lima