├── .gitignore ├── LICENSE.md ├── README.md ├── gatsby-node.js ├── index.js ├── package.json └── shell-example.png /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | *.log.* 4 | .DS_Store 5 | package-lock.json 6 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Gabriel Escabora 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Version](https://img.shields.io/npm/v/gatsby-static-paths.svg)](https://www.npmjs.com/package/gatsby-static-paths) 2 | [![Downloads Total](https://img.shields.io/npm/dt/gatsby-static-paths.svg)](https://www.npmjs.com/package/gatsby-static-paths) 3 | [![License](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/escabora/gatsby-static-paths/blob/main/LICENSE.md) 4 | [![CodeFactor](https://www.codefactor.io/repository/github/escabora/gatsby-static-paths/badge)](https://www.codefactor.io/repository/github/escabora/gatsby-static-paths) 5 | 6 | # gatsby-static-paths 7 | 8 | If you're looking for a solution identical to Next.js's getStaticPaths, you've come to the right place. 9 | 10 | This plugin is very simple to use. It generates static pages in Gatsby in a very simple way. 11 | 12 | ## Install 13 | 14 | `$ npm i gatsby-static-paths` 15 | 16 | or 17 | 18 | `$ yarn add gatsby-static-paths` 19 | 20 | ## How to use 21 | 22 | Add the plugin to your `gatsby-config.js`. 23 | 24 | ```javascript 25 | module.exports = { 26 | plugins: [ 27 | `gatsby-static-paths` 28 | ] 29 | } 30 | ``` 31 | 32 | In your component's page role `pages/articles.js` 33 | 34 | ```javascript 35 | const Articles = ({ pageContext }) => { 36 | return

my article {pageContext.staticProps}

; 37 | }; 38 | 39 | export default Articles; 40 | 41 | export const getStaticPaths = async () => { 42 | const api = await fetch('https://dog.ceo/api/breeds/list/all'); 43 | const json = await api.json(); 44 | 45 | return { 46 | paths: Object.keys(json.message).map((article) => ({ 47 | params: { 48 | basePath: '/articles/', 49 | slug: article, 50 | }, 51 | staticProps: article, 52 | })), 53 | }; 54 | }; 55 | ``` 56 | 57 | See that if you want to send props via context to a page you just need to put the value in the `staticProps` key and in your component you receive it as `pageContext.staticProps` 58 | 59 | 60 | ## On build Time 61 | You will see the magic happen. The pages you passed as return from the getStaticPaths function will be listed. 62 | 63 | ![Shell Example](/shell-example.png) 64 | 65 | License 66 | ------- 67 | 68 | The code is available under the [MIT License](LICENSE.md). 69 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | const createDynamicPages = require('./index'); 2 | 3 | require('@babel/register')({ 4 | ignore: [/(node_modules)/], 5 | presets: ['babel-preset-gatsby'], 6 | }); 7 | 8 | exports.onCreatePage = async ({ page, actions }) => { 9 | actions.deletePage(page); 10 | if (page.component.includes('.cache')) return; 11 | 12 | const PageComponent = require(page.component); 13 | const getStaticPaths = PageComponent.getStaticPaths; 14 | createDynamicPages(getStaticPaths, actions, page); 15 | }; 16 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @param {function} getStaticPaths - Function exported from component 3 | * @param {function} actions - Function of the Gatsby Node APIs 4 | * @param {Object} page - Object containing page properties 5 | * * @returns {Function} Returns asynchronous function to create the pages using Gatsby Node APIs 6 | */ 7 | const createDynamicPages = async (getStaticPaths, actions, page) => { 8 | if (!getStaticPaths) { 9 | actions.createPage({ 10 | ...page, 11 | }); 12 | } else { 13 | try { 14 | const routes = await getStaticPaths(); 15 | for (route of routes?.paths) { 16 | const staticPath = route.params.basePath + route.params.slug; 17 | console.log('\x1b[32msuccess\x1b[0m', staticPath); 18 | actions.createPage({ 19 | ...page, 20 | path: staticPath, 21 | context: { staticProps: route?.staticProps }, 22 | }); 23 | } 24 | } catch (err) { 25 | console.error('\x1b[41mError gatsby-plugin-static-paths\x1b[0m', err); 26 | } 27 | } 28 | }; 29 | 30 | module.exports = createDynamicPages; 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-static-paths", 3 | "description": "Implementing getStaticPaths like Next Js in Gatsby", 4 | "author": "Gabriel Escabora ", 5 | "version": "1.0.10", 6 | "repository": "git@github.com:escabora/gatsby-static-paths.git", 7 | "license": "MIT", 8 | "keywords": [ 9 | "getStaticPaths", 10 | "gatsby", 11 | "plugin", 12 | "gatsby-plugin", 13 | "next.js", 14 | "Routes Dinamics in Gatsby", 15 | "Generate Routes Gatsby" 16 | ], 17 | "dependencies": { 18 | "@babel/register": "^7.16.0" 19 | } 20 | } -------------------------------------------------------------------------------- /shell-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/escabora/gatsby-static-paths/8c678117b066bfeb2357a276e8e64f90ce00de30/shell-example.png --------------------------------------------------------------------------------