Awesome
Welcome to nextjs-kodyfire 👋
Generate nextjs components and related artifacts based on HTML templates using Kodyfire.
🏠 Homepage
Requirements
nextjs-kodyfire requires the kodyfire-cli to be installed
npm install -g kodyfire-cli
Install
npm install nextjs-kodyfire
Usage
Method 1: As a generator
In order to generate your artifacts, run the generate
command. The syntax is kody generate|g [kody] [concept]
. If you ommit kody
and concept
the assistant will prompt you to select them. As an example, run the following command from your terminal:
kody generate nextjs component
Method 2: As a runner in a kody project
Refer to the kodyfire generate your artifact section.
Once your project is initialized and ready for kody,
generate your nextjs concept using the kody ride
command or manually. As an example, A declaration for a nextjs concept might look like the following:
{
"name": "Bird",
"template": "class.ts.template",
"outputDir": "classes",
"extends": "Animal",
"implements": "",
"hasConstructor": true,
"args": [
{
"name": "name",
"type": "string"
}
],
"methods": [
{
"name": "fly",
"returnType": "void"
}
],
"properties": [
{
"name": "family",
"type": "string",
"optional": false
},
{
"name": "weight",
"type": "number",
"optional": true
}
]
}
After adding your concept(s) definitions, run the following command to generate your assets.
kody run -s kody-nextjs.json
Available concepts
component
Generates a react component
Params
name
string - Component name. Default filenametemplate
enum - template name to use. Only one by default.extension
enum - file extension. Possible values: js, ts, jsx, tsxisFolder
boolean - If the component will be placed in a folder. This will add an index file for imports.ccsModule
boolean - if a css module file should be created.outputDir
string - The output directory
page
Generates a nextjs page
Params
name
string - Component name. Default filenameisFolder
boolean - If the component will be placed in a folder. This will add an index file for imports.ccsModule
boolean - if a css module file should be created.isDynamicRoute
boolean - if the page uses a dynamic route.routerParam
string - Required if isDynamicRoute istrue
. This will generate a dynamic page. Example: [id].jsxoutputDir
string - The output directory
api
Generates a nextjs api endpoint
Params
name
string - Name of the file/folderisFolder
boolean - If the component will be placed in a folder.isDynamicRoute
boolean - if the endpoint uses a dynamic route.routerParam
string - Required ifisDynamicRoute
istrue
. This will generate a filename as [routerParam].tsoutputDir
string - The output directory. Default issrc/pages/api
class
Generates a typescript class
Params
name
string - class name. Default filenametemplate
enum - template name to use. Only one by default.implements
string - Interface(s) to implementextends
string - class(es) to extend.properties
Property[] - list of propertiesmethods
Method[] - list of methodshasConstructor
boolean - if class should have a constructorargs
{name: string, type: string} - List of argument to pass to the constructor.hasConstructor
must be true.outputDir
string - The output directory
interface
Generates a typescript interface
Params
name
string - class name. Default filenametemplate
enum - template name to use. Only one by default.extends
string - class(es) to extend.properties
Property[] - list of propertiesoutputDir
string - The output directory
tsconfig
Generates a tsconfig file
Params
name
enum - The tsconfig configuration nameoutputDir
string - The output directory
Tsconfigs
Refer to this reference for a list of available tsconfig templates
Property
name
string - property nametype
string - property typeoptional
boolean - if the property is optional when constructing an object
Method
name
string - method nameparams
{name: string, type: string} - list of method arguments. Leave empty if nonereturnType
string - Return type (example: string, number, void)
Add the following params to your generated concepts using the kody ride
command or manually. As an example, A declaration for a class might look like the following:
📅 Future Features
- Generate
component
- Generate
page
- Generate
api
Run tests
TODO
Author
👤 Anis Marrouchi
- Website: https://noqta.tn
- Twitter: @anis_marrouchi
- GitHub: @anis-marrouchi
- LinkedIn: @marrouchi
🤝 Contributing
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Show your support
Give a ⭐️ if this project helped you!
Credits
📝 License
Copyright © 2022 Anis Marrouchi.
This project is MIT licensed.
This README was generated with ❤️ by readme-kodyfire