- Getting Started
- Folder structure
- How to create a new Page
- Basic recommended configurations
- Relevant links
- Running backend locally
- Seeding The Data
- Setting Up The Frontend
Our app follows the basic structure: Note: CamelCase convention must be used for directory names as components, pages, layout, providers
/your/app/root/
`-- src
|-- app
|-- [lang]
|-- home/
|-- about/
|-- contact/
|-- components/
|-- Footer/
|-- Navbar/
|-- utils
|-- hooks/
|-- constants/
|-- function/
|-- typing/
|-- Layouts/
Index routes
The router will automatically route files named index to the root of the directory.
[index] app/pages.js โ / [some_url] page/blog/page.js โ /blog
App with Dynamic Routes
Next.js supports pages with dynamic routes. For example, if you create a file called pages/posts/[id].js, then it will be accessible at posts/1, posts/2, etc.
This is a next project please consider it will need a server running to be able
Next Doc (https://nextjs.org/docs/app/building-your-application/routing/defining-routes)
When developing one good practice is to start by opening a draft PR so the team can keep up with what you're doing from the start, but that's not strictly necessary.
When opening a PR you should name it following the template
[ANW30-XXX]: <ticket description>
And do not ignore the PR description template, please fill it out as better as you can, this helps everyone who's reviewing and can help you remember things you're leaving behind. Also, assign the PR to yourself so we can easily track it.
When you're finished, open the PR for review. This does not mean the PR is ready to merge, only that you feel like you're done, so do not fret about only opening the PR when you think it's a masterpiece
Please, auto review your own PR before opening it up!
This configuration assumes that you're using Chrome, if not just change the type
property to whichever you like.
This is a list of recommend extensions and some VSCode configs to help ease the Developer Experience. Some of these we recommend more fiercely because you'll be using them very frequently. These will be suffixed with *
.
- Prettier - Code formatter *
- ESLint *
- Live Share (this is nice to have if you're working more commonly in pair programming)
- Auto Rename Tag
- Toggle Quotes
- ES7 + React/Redux/React-Native snippets
- Tailwind (https://tailwindui.com/documentation)
- MUI (https://mui.com/)
- NextJS (https://nextjs.org/docs)
- Strapi (https://docs.strapi.io/dev-docs/intro)
- Clone the backend repository locally:
git clone https://github.com/a1repo/a1_web_3.0_strapi_cms.git
- Next, Set up your
.env
file. You can use the.env.example
file as reference:
HOST=localhost
PORT=1337
APP_KEYS="toBeModified1,toBeModified2"
API_TOKEN_SALT=tobemodified
ADMIN_JWT_SECRET=tobemodified
JWT_SECRET=tobemodified
TRANSFER_TOKEN_SALT=tobemodified
- Start the backend project by running the following command:
npm run build
npm run develop
You will be prompted to create your first admin user.
Great. You now have your project running. Let's add some data.
We are going to use our DEITS feature which will alow to easily import data into your project.
You can learn more about it in our documentation here.
In the root of our project we have our seed-data.tar.gz
file. We will use it to seed our data.
-
Open up your terminal and make in the
backend
folder. -
Run the following command to seed your data:
npm run strapi import -f ./seed-data.tar.gz
This will import your data locally. Log back into your admin panel to see the newly imported data.
Here is a quick video covering initial setup and data seeding.
seed-data-demo.mp4
Next we need to create our .env
file and paste in the following.
NEXT_PUBLIC_STRAPI_API_TOKEN=your-api-token
NEXT_PUBLIC_PAGE_LIMIT=6
NEXT_PUBLIC_STRAPI_FORM_SUBMISSION_TOKEN=your-form-submission-token
NEXT_PUBLIC_STRAPI_API_URL=http://localhost:1337