├── .gitignore ├── README.md ├── components └── post.js ├── config.json ├── dump ├── export.json └── images.ctfassets.net │ └── b7km0t64rdcd │ ├── 6PsEXzp4l2Doyqm1F41opi │ └── 7002dce32b08986903fb5681861bc765 │ │ └── batman.jpg │ └── 7hlEFYl579kGDEEbfylxvC │ └── 1cb85e713fc4c534c46a339b1a1e0604 │ └── flash.jpg ├── import.json ├── next.config.js ├── package-lock.json ├── package.json ├── pages └── index.js └── public └── favicon.ico /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | .env* 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Dead simple article listing using NextJS and Contentful 2 | 3 | Details at https://medium.com/javascript-in-plain-english/the-most-simple-contentful-react-tutorial-using-a-nextjs-application-8d0ce4596ad6 4 | -------------------------------------------------------------------------------- /components/post.js: -------------------------------------------------------------------------------- 1 | // This is used to transform AST (Abstract Syntax Tree) to HTML that react can understand. 2 | import { documentToHtmlString } from "@contentful/rich-text-html-renderer"; 3 | 4 | function Post(props) { 5 | // Access post fields map 6 | const post = props.post.fields; 7 | 8 | return ( 9 |
10 |
11 |
12 | 13 |
14 |
15 |
{post.title}
16 |
{new Date(post.date).toDateString()}
17 |
18 |
19 |
20 |
21 |
22 |
23 |

By {post.author.fields.firstname + " " + post.author.fields.lastname}

24 |
25 |
26 |
27 |
28 |
29 | ); 30 | } 31 | 32 | export default Post; 33 | -------------------------------------------------------------------------------- /config.json: -------------------------------------------------------------------------------- 1 | { 2 | "space": "your_space_id_here", 3 | "accessToken": "your_content_delivery_key_here" 4 | } 5 | -------------------------------------------------------------------------------- /dump/export.json: -------------------------------------------------------------------------------- 1 | { 2 | "contentTypes": [ 3 | { 4 | "sys": { 5 | "space": { 6 | "sys": { 7 | "type": "Link", 8 | "linkType": "Space", 9 | "id": "b7km0t64rdcd" 10 | } 11 | }, 12 | "id": "article", 13 | "type": "ContentType", 14 | "createdAt": "2019-10-30T11:53:14.106Z", 15 | "updatedAt": "2019-11-09T14:48:40.624Z", 16 | "environment": { 17 | "sys": { 18 | "id": "master", 19 | "type": "Link", 20 | "linkType": "Environment" 21 | } 22 | }, 23 | "publishedVersion": 17, 24 | "publishedAt": "2019-11-09T14:48:40.624Z", 25 | "firstPublishedAt": "2019-10-30T11:53:15.203Z", 26 | "createdBy": { 27 | "sys": { 28 | "type": "Link", 29 | "linkType": "User", 30 | "id": "79hib8nZlbmYwD4Qnkbpge" 31 | } 32 | }, 33 | "updatedBy": { 34 | "sys": { 35 | "type": "Link", 36 | "linkType": "User", 37 | "id": "79hib8nZlbmYwD4Qnkbpge" 38 | } 39 | }, 40 | "publishedCounter": 9, 41 | "version": 18, 42 | "publishedBy": { 43 | "sys": { 44 | "type": "Link", 45 | "linkType": "User", 46 | "id": "79hib8nZlbmYwD4Qnkbpge" 47 | } 48 | } 49 | }, 50 | "displayField": "title", 51 | "name": "Article", 52 | "description": "", 53 | "fields": [ 54 | { 55 | "id": "title", 56 | "name": "title", 57 | "type": "Symbol", 58 | "localized": false, 59 | "required": false, 60 | "validations": [ 61 | ], 62 | "disabled": false, 63 | "omitted": false 64 | }, 65 | { 66 | "id": "date", 67 | "name": "date", 68 | "type": "Date", 69 | "localized": false, 70 | "required": false, 71 | "validations": [ 72 | ], 73 | "disabled": false, 74 | "omitted": false 75 | }, 76 | { 77 | "id": "image", 78 | "name": "image", 79 | "type": "Link", 80 | "localized": false, 81 | "required": false, 82 | "validations": [ 83 | { 84 | "linkMimetypeGroup": [ 85 | "image" 86 | ] 87 | } 88 | ], 89 | "disabled": false, 90 | "omitted": false, 91 | "linkType": "Asset" 92 | }, 93 | { 94 | "id": "body", 95 | "name": "body", 96 | "type": "RichText", 97 | "localized": false, 98 | "required": false, 99 | "validations": [ 100 | ], 101 | "disabled": false, 102 | "omitted": false 103 | }, 104 | { 105 | "id": "author", 106 | "name": "author", 107 | "type": "Link", 108 | "localized": false, 109 | "required": false, 110 | "validations": [ 111 | { 112 | "linkContentType": [ 113 | "author" 114 | ] 115 | } 116 | ], 117 | "disabled": false, 118 | "omitted": false, 119 | "linkType": "Entry" 120 | } 121 | ] 122 | }, 123 | { 124 | "sys": { 125 | "space": { 126 | "sys": { 127 | "type": "Link", 128 | "linkType": "Space", 129 | "id": "b7km0t64rdcd" 130 | } 131 | }, 132 | "id": "author", 133 | "type": "ContentType", 134 | "createdAt": "2019-10-30T11:53:42.934Z", 135 | "updatedAt": "2019-11-09T15:06:22.995Z", 136 | "environment": { 137 | "sys": { 138 | "id": "master", 139 | "type": "Link", 140 | "linkType": "Environment" 141 | } 142 | }, 143 | "publishedVersion": 3, 144 | "publishedAt": "2019-11-09T15:06:22.995Z", 145 | "firstPublishedAt": "2019-10-30T11:53:43.576Z", 146 | "createdBy": { 147 | "sys": { 148 | "type": "Link", 149 | "linkType": "User", 150 | "id": "79hib8nZlbmYwD4Qnkbpge" 151 | } 152 | }, 153 | "updatedBy": { 154 | "sys": { 155 | "type": "Link", 156 | "linkType": "User", 157 | "id": "79hib8nZlbmYwD4Qnkbpge" 158 | } 159 | }, 160 | "publishedCounter": 2, 161 | "version": 4, 162 | "publishedBy": { 163 | "sys": { 164 | "type": "Link", 165 | "linkType": "User", 166 | "id": "79hib8nZlbmYwD4Qnkbpge" 167 | } 168 | } 169 | }, 170 | "displayField": "lastname", 171 | "name": "Author", 172 | "description": "", 173 | "fields": [ 174 | { 175 | "id": "lastname", 176 | "name": "lastname", 177 | "type": "Symbol", 178 | "localized": false, 179 | "required": false, 180 | "validations": [ 181 | ], 182 | "disabled": false, 183 | "omitted": false 184 | }, 185 | { 186 | "id": "firstname", 187 | "name": "firstname", 188 | "type": "Symbol", 189 | "localized": false, 190 | "required": false, 191 | "validations": [ 192 | ], 193 | "disabled": false, 194 | "omitted": false 195 | } 196 | ] 197 | } 198 | ], 199 | "editorInterfaces": [ 200 | { 201 | "sys": { 202 | "id": "default", 203 | "type": "EditorInterface", 204 | "space": { 205 | "sys": { 206 | "id": "b7km0t64rdcd", 207 | "type": "Link", 208 | "linkType": "Space" 209 | } 210 | }, 211 | "version": 18, 212 | "createdAt": "2019-10-30T11:53:15.346Z", 213 | "createdBy": { 214 | "sys": { 215 | "id": "79hib8nZlbmYwD4Qnkbpge", 216 | "type": "Link", 217 | "linkType": "User" 218 | } 219 | }, 220 | "updatedAt": "2019-11-09T14:48:41.237Z", 221 | "updatedBy": { 222 | "sys": { 223 | "id": "79hib8nZlbmYwD4Qnkbpge", 224 | "type": "Link", 225 | "linkType": "User" 226 | } 227 | }, 228 | "contentType": { 229 | "sys": { 230 | "id": "article", 231 | "type": "Link", 232 | "linkType": "ContentType" 233 | } 234 | }, 235 | "environment": { 236 | "sys": { 237 | "id": "master", 238 | "type": "Link", 239 | "linkType": "Environment" 240 | } 241 | } 242 | }, 243 | "controls": [ 244 | { 245 | "fieldId": "title", 246 | "widgetId": "singleLine", 247 | "widgetNamespace": "builtin" 248 | }, 249 | { 250 | "fieldId": "date", 251 | "settings": { 252 | "ampm": "24", 253 | "format": "timeZ" 254 | }, 255 | "widgetId": "datePicker", 256 | "widgetNamespace": "builtin" 257 | }, 258 | { 259 | "fieldId": "image", 260 | "widgetId": "assetLinkEditor", 261 | "widgetNamespace": "builtin" 262 | }, 263 | { 264 | "fieldId": "body", 265 | "widgetId": "richTextEditor", 266 | "widgetNamespace": "builtin" 267 | }, 268 | { 269 | "fieldId": "author", 270 | "widgetId": "entryLinkEditor", 271 | "widgetNamespace": "builtin" 272 | } 273 | ] 274 | }, 275 | { 276 | "sys": { 277 | "id": "default", 278 | "type": "EditorInterface", 279 | "space": { 280 | "sys": { 281 | "id": "b7km0t64rdcd", 282 | "type": "Link", 283 | "linkType": "Space" 284 | } 285 | }, 286 | "version": 4, 287 | "createdAt": "2019-10-30T11:53:43.715Z", 288 | "createdBy": { 289 | "sys": { 290 | "id": "79hib8nZlbmYwD4Qnkbpge", 291 | "type": "Link", 292 | "linkType": "User" 293 | } 294 | }, 295 | "updatedAt": "2019-11-09T15:06:23.903Z", 296 | "updatedBy": { 297 | "sys": { 298 | "id": "79hib8nZlbmYwD4Qnkbpge", 299 | "type": "Link", 300 | "linkType": "User" 301 | } 302 | }, 303 | "contentType": { 304 | "sys": { 305 | "id": "author", 306 | "type": "Link", 307 | "linkType": "ContentType" 308 | } 309 | }, 310 | "environment": { 311 | "sys": { 312 | "id": "master", 313 | "type": "Link", 314 | "linkType": "Environment" 315 | } 316 | } 317 | }, 318 | "controls": [ 319 | { 320 | "fieldId": "lastname", 321 | "widgetId": "singleLine", 322 | "widgetNamespace": "builtin" 323 | }, 324 | { 325 | "fieldId": "firstname", 326 | "widgetId": "singleLine", 327 | "widgetNamespace": "builtin" 328 | } 329 | ] 330 | } 331 | ], 332 | "entries": [ 333 | { 334 | "sys": { 335 | "space": { 336 | "sys": { 337 | "type": "Link", 338 | "linkType": "Space", 339 | "id": "b7km0t64rdcd" 340 | } 341 | }, 342 | "id": "3U15aVKAa0H1hdI6pwA0UN", 343 | "type": "Entry", 344 | "createdAt": "2019-10-30T11:55:41.443Z", 345 | "updatedAt": "2019-11-09T14:49:18.105Z", 346 | "environment": { 347 | "sys": { 348 | "id": "master", 349 | "type": "Link", 350 | "linkType": "Environment" 351 | } 352 | }, 353 | "publishedVersion": 19, 354 | "publishedAt": "2019-11-09T14:49:18.105Z", 355 | "firstPublishedAt": "2019-10-30T11:56:02.688Z", 356 | "createdBy": { 357 | "sys": { 358 | "type": "Link", 359 | "linkType": "User", 360 | "id": "79hib8nZlbmYwD4Qnkbpge" 361 | } 362 | }, 363 | "updatedBy": { 364 | "sys": { 365 | "type": "Link", 366 | "linkType": "User", 367 | "id": "79hib8nZlbmYwD4Qnkbpge" 368 | } 369 | }, 370 | "publishedCounter": 2, 371 | "version": 20, 372 | "publishedBy": { 373 | "sys": { 374 | "type": "Link", 375 | "linkType": "User", 376 | "id": "79hib8nZlbmYwD4Qnkbpge" 377 | } 378 | }, 379 | "contentType": { 380 | "sys": { 381 | "type": "Link", 382 | "linkType": "ContentType", 383 | "id": "author" 384 | } 385 | } 386 | }, 387 | "fields": { 388 | "lastname": { 389 | "en-US": "Hanss" 390 | }, 391 | "firstname": { 392 | "en-US": "Andréas" 393 | } 394 | } 395 | }, 396 | { 397 | "sys": { 398 | "space": { 399 | "sys": { 400 | "type": "Link", 401 | "linkType": "Space", 402 | "id": "b7km0t64rdcd" 403 | } 404 | }, 405 | "id": "6jw9zIqyc72Lg3VLRLi4xn", 406 | "type": "Entry", 407 | "createdAt": "2019-11-09T14:49:26.251Z", 408 | "updatedAt": "2019-11-09T14:51:01.681Z", 409 | "environment": { 410 | "sys": { 411 | "id": "master", 412 | "type": "Link", 413 | "linkType": "Environment" 414 | } 415 | }, 416 | "publishedVersion": 13, 417 | "publishedAt": "2019-11-09T14:51:01.681Z", 418 | "firstPublishedAt": "2019-11-09T14:51:01.681Z", 419 | "createdBy": { 420 | "sys": { 421 | "type": "Link", 422 | "linkType": "User", 423 | "id": "79hib8nZlbmYwD4Qnkbpge" 424 | } 425 | }, 426 | "updatedBy": { 427 | "sys": { 428 | "type": "Link", 429 | "linkType": "User", 430 | "id": "79hib8nZlbmYwD4Qnkbpge" 431 | } 432 | }, 433 | "publishedCounter": 1, 434 | "version": 14, 435 | "publishedBy": { 436 | "sys": { 437 | "type": "Link", 438 | "linkType": "User", 439 | "id": "79hib8nZlbmYwD4Qnkbpge" 440 | } 441 | }, 442 | "contentType": { 443 | "sys": { 444 | "type": "Link", 445 | "linkType": "ContentType", 446 | "id": "article" 447 | } 448 | } 449 | }, 450 | "fields": { 451 | "title": { 452 | "en-US": "Batman" 453 | }, 454 | "date": { 455 | "en-US": "2019-11-09T00:00+01:00" 456 | }, 457 | "image": { 458 | "en-US": { 459 | "sys": { 460 | "type": "Link", 461 | "linkType": "Asset", 462 | "id": "6PsEXzp4l2Doyqm1F41opi" 463 | } 464 | } 465 | }, 466 | "body": { 467 | "en-US": { 468 | "data": { 469 | }, 470 | "content": [ 471 | { 472 | "data": { 473 | }, 474 | "content": [ 475 | { 476 | "data": { 477 | }, 478 | "marks": [ 479 | { 480 | "type": "bold" 481 | } 482 | ], 483 | "value": "Batman", 484 | "nodeType": "text" 485 | }, 486 | { 487 | "data": { 488 | }, 489 | "marks": [ 490 | ], 491 | "value": " is a ", 492 | "nodeType": "text" 493 | }, 494 | { 495 | "data": { 496 | "uri": "https://en.wikipedia.org/wiki/Fictional_character" 497 | }, 498 | "content": [ 499 | { 500 | "data": { 501 | }, 502 | "marks": [ 503 | ], 504 | "value": "fictional", 505 | "nodeType": "text" 506 | } 507 | ], 508 | "nodeType": "hyperlink" 509 | }, 510 | { 511 | "data": { 512 | }, 513 | "marks": [ 514 | ], 515 | "value": " ", 516 | "nodeType": "text" 517 | }, 518 | { 519 | "data": { 520 | "uri": "https://en.wikipedia.org/wiki/Superhero" 521 | }, 522 | "content": [ 523 | { 524 | "data": { 525 | }, 526 | "marks": [ 527 | ], 528 | "value": "superhero", 529 | "nodeType": "text" 530 | } 531 | ], 532 | "nodeType": "hyperlink" 533 | }, 534 | { 535 | "data": { 536 | }, 537 | "marks": [ 538 | ], 539 | "value": " appearing in ", 540 | "nodeType": "text" 541 | }, 542 | { 543 | "data": { 544 | "uri": "https://en.wikipedia.org/wiki/American_comic_book" 545 | }, 546 | "content": [ 547 | { 548 | "data": { 549 | }, 550 | "marks": [ 551 | ], 552 | "value": "American comic books", 553 | "nodeType": "text" 554 | } 555 | ], 556 | "nodeType": "hyperlink" 557 | }, 558 | { 559 | "data": { 560 | }, 561 | "marks": [ 562 | ], 563 | "value": " published by ", 564 | "nodeType": "text" 565 | }, 566 | { 567 | "data": { 568 | "uri": "https://en.wikipedia.org/wiki/DC_Comics" 569 | }, 570 | "content": [ 571 | { 572 | "data": { 573 | }, 574 | "marks": [ 575 | ], 576 | "value": "DC Comics", 577 | "nodeType": "text" 578 | } 579 | ], 580 | "nodeType": "hyperlink" 581 | }, 582 | { 583 | "data": { 584 | }, 585 | "marks": [ 586 | ], 587 | "value": ". The character was created by artist ", 588 | "nodeType": "text" 589 | }, 590 | { 591 | "data": { 592 | "uri": "https://en.wikipedia.org/wiki/Bob_Kane" 593 | }, 594 | "content": [ 595 | { 596 | "data": { 597 | }, 598 | "marks": [ 599 | ], 600 | "value": "Bob Kane", 601 | "nodeType": "text" 602 | } 603 | ], 604 | "nodeType": "hyperlink" 605 | }, 606 | { 607 | "data": { 608 | }, 609 | "marks": [ 610 | ], 611 | "value": " and writer ", 612 | "nodeType": "text" 613 | }, 614 | { 615 | "data": { 616 | "uri": "https://en.wikipedia.org/wiki/Bill_Finger" 617 | }, 618 | "content": [ 619 | { 620 | "data": { 621 | }, 622 | "marks": [ 623 | ], 624 | "value": "Bill Finger", 625 | "nodeType": "text" 626 | } 627 | ], 628 | "nodeType": "hyperlink" 629 | }, 630 | { 631 | "data": { 632 | }, 633 | "marks": [ 634 | ], 635 | "value": ",", 636 | "nodeType": "text" 637 | }, 638 | { 639 | "data": { 640 | "uri": "https://en.wikipedia.org/wiki/Batman#cite_note-FingerSep2015-2" 641 | }, 642 | "content": [ 643 | { 644 | "data": { 645 | }, 646 | "marks": [ 647 | ], 648 | "value": "[2]", 649 | "nodeType": "text" 650 | } 651 | ], 652 | "nodeType": "hyperlink" 653 | }, 654 | { 655 | "data": { 656 | }, 657 | "marks": [ 658 | ], 659 | "value": "", 660 | "nodeType": "text" 661 | }, 662 | { 663 | "data": { 664 | "uri": "https://en.wikipedia.org/wiki/Batman#cite_note-FingerOct2015-3" 665 | }, 666 | "content": [ 667 | { 668 | "data": { 669 | }, 670 | "marks": [ 671 | ], 672 | "value": "[3]", 673 | "nodeType": "text" 674 | } 675 | ], 676 | "nodeType": "hyperlink" 677 | }, 678 | { 679 | "data": { 680 | }, 681 | "marks": [ 682 | ], 683 | "value": " and first appeared in ", 684 | "nodeType": "text" 685 | }, 686 | { 687 | "data": { 688 | "uri": "https://en.wikipedia.org/wiki/Detective_Comics" 689 | }, 690 | "content": [ 691 | { 692 | "data": { 693 | }, 694 | "marks": [ 695 | { 696 | "type": "italic" 697 | } 698 | ], 699 | "value": "Detective Comics", 700 | "nodeType": "text" 701 | } 702 | ], 703 | "nodeType": "hyperlink" 704 | }, 705 | { 706 | "data": { 707 | }, 708 | "marks": [ 709 | ], 710 | "value": "\n #27 in 1939. Originally named the \"Bat-Man,\" the character is also \nreferred to by such epithets as the Caped Crusader, the Dark Knight, and\n the World's Greatest Detective.", 711 | "nodeType": "text" 712 | }, 713 | { 714 | "data": { 715 | "uri": "https://en.wikipedia.org/wiki/Batman#cite_note-Fleisher-6" 716 | }, 717 | "content": [ 718 | { 719 | "data": { 720 | }, 721 | "marks": [ 722 | ], 723 | "value": "[6]", 724 | "nodeType": "text" 725 | } 726 | ], 727 | "nodeType": "hyperlink" 728 | }, 729 | { 730 | "data": { 731 | }, 732 | "marks": [ 733 | ], 734 | "value": "", 735 | "nodeType": "text" 736 | } 737 | ], 738 | "nodeType": "paragraph" 739 | } 740 | ], 741 | "nodeType": "document" 742 | } 743 | }, 744 | "author": { 745 | "en-US": { 746 | "sys": { 747 | "type": "Link", 748 | "linkType": "Entry", 749 | "id": "3U15aVKAa0H1hdI6pwA0UN" 750 | } 751 | } 752 | } 753 | } 754 | }, 755 | { 756 | "sys": { 757 | "space": { 758 | "sys": { 759 | "type": "Link", 760 | "linkType": "Space", 761 | "id": "b7km0t64rdcd" 762 | } 763 | }, 764 | "id": "3uiCfLQtg3iH5jaWLnQ3F3", 765 | "type": "Entry", 766 | "createdAt": "2019-11-09T15:13:08.013Z", 767 | "updatedAt": "2019-11-09T15:16:13.268Z", 768 | "environment": { 769 | "sys": { 770 | "id": "master", 771 | "type": "Link", 772 | "linkType": "Environment" 773 | } 774 | }, 775 | "publishedVersion": 8, 776 | "publishedAt": "2019-11-09T15:16:13.268Z", 777 | "firstPublishedAt": "2019-11-09T15:16:13.268Z", 778 | "createdBy": { 779 | "sys": { 780 | "type": "Link", 781 | "linkType": "User", 782 | "id": "79hib8nZlbmYwD4Qnkbpge" 783 | } 784 | }, 785 | "updatedBy": { 786 | "sys": { 787 | "type": "Link", 788 | "linkType": "User", 789 | "id": "79hib8nZlbmYwD4Qnkbpge" 790 | } 791 | }, 792 | "publishedCounter": 1, 793 | "version": 9, 794 | "publishedBy": { 795 | "sys": { 796 | "type": "Link", 797 | "linkType": "User", 798 | "id": "79hib8nZlbmYwD4Qnkbpge" 799 | } 800 | }, 801 | "contentType": { 802 | "sys": { 803 | "type": "Link", 804 | "linkType": "ContentType", 805 | "id": "article" 806 | } 807 | } 808 | }, 809 | "fields": { 810 | "title": { 811 | "en-US": "Flash" 812 | }, 813 | "date": { 814 | "en-US": "2019-11-08T00:00+01:00" 815 | }, 816 | "image": { 817 | "en-US": { 818 | "sys": { 819 | "type": "Link", 820 | "linkType": "Asset", 821 | "id": "7hlEFYl579kGDEEbfylxvC" 822 | } 823 | } 824 | }, 825 | "body": { 826 | "en-US": { 827 | "data": { 828 | }, 829 | "content": [ 830 | { 831 | "data": { 832 | }, 833 | "content": [ 834 | { 835 | "data": { 836 | }, 837 | "marks": [ 838 | { 839 | "type": "bold" 840 | } 841 | ], 842 | "value": "The Flash", 843 | "nodeType": "text" 844 | }, 845 | { 846 | "data": { 847 | }, 848 | "marks": [ 849 | ], 850 | "value": " (or simply ", 851 | "nodeType": "text" 852 | }, 853 | { 854 | "data": { 855 | }, 856 | "marks": [ 857 | { 858 | "type": "bold" 859 | } 860 | ], 861 | "value": "Flash", 862 | "nodeType": "text" 863 | }, 864 | { 865 | "data": { 866 | }, 867 | "marks": [ 868 | ], 869 | "value": ") is the name of several ", 870 | "nodeType": "text" 871 | }, 872 | { 873 | "data": { 874 | "uri": "https://en.wikipedia.org/wiki/Superhero" 875 | }, 876 | "content": [ 877 | { 878 | "data": { 879 | }, 880 | "marks": [ 881 | ], 882 | "value": "superheroes", 883 | "nodeType": "text" 884 | } 885 | ], 886 | "nodeType": "hyperlink" 887 | }, 888 | { 889 | "data": { 890 | }, 891 | "marks": [ 892 | ], 893 | "value": " appearing in ", 894 | "nodeType": "text" 895 | }, 896 | { 897 | "data": { 898 | "uri": "https://en.wikipedia.org/wiki/American_comic_book" 899 | }, 900 | "content": [ 901 | { 902 | "data": { 903 | }, 904 | "marks": [ 905 | ], 906 | "value": "American comic books", 907 | "nodeType": "text" 908 | } 909 | ], 910 | "nodeType": "hyperlink" 911 | }, 912 | { 913 | "data": { 914 | }, 915 | "marks": [ 916 | ], 917 | "value": " published by ", 918 | "nodeType": "text" 919 | }, 920 | { 921 | "data": { 922 | "uri": "https://en.wikipedia.org/wiki/DC_Comics" 923 | }, 924 | "content": [ 925 | { 926 | "data": { 927 | }, 928 | "marks": [ 929 | ], 930 | "value": "DC Comics", 931 | "nodeType": "text" 932 | } 933 | ], 934 | "nodeType": "hyperlink" 935 | }, 936 | { 937 | "data": { 938 | }, 939 | "marks": [ 940 | ], 941 | "value": ". Created by writer ", 942 | "nodeType": "text" 943 | }, 944 | { 945 | "data": { 946 | "uri": "https://en.wikipedia.org/wiki/Gardner_Fox" 947 | }, 948 | "content": [ 949 | { 950 | "data": { 951 | }, 952 | "marks": [ 953 | ], 954 | "value": "Gardner Fox", 955 | "nodeType": "text" 956 | } 957 | ], 958 | "nodeType": "hyperlink" 959 | }, 960 | { 961 | "data": { 962 | }, 963 | "marks": [ 964 | ], 965 | "value": " and artist ", 966 | "nodeType": "text" 967 | }, 968 | { 969 | "data": { 970 | "uri": "https://en.wikipedia.org/wiki/Harry_Lampert" 971 | }, 972 | "content": [ 973 | { 974 | "data": { 975 | }, 976 | "marks": [ 977 | ], 978 | "value": "Harry Lampert", 979 | "nodeType": "text" 980 | } 981 | ], 982 | "nodeType": "hyperlink" 983 | }, 984 | { 985 | "data": { 986 | }, 987 | "marks": [ 988 | ], 989 | "value": ", the original Flash first appeared in ", 990 | "nodeType": "text" 991 | }, 992 | { 993 | "data": { 994 | "uri": "https://en.wikipedia.org/wiki/Flash_Comics" 995 | }, 996 | "content": [ 997 | { 998 | "data": { 999 | }, 1000 | "marks": [ 1001 | { 1002 | "type": "italic" 1003 | } 1004 | ], 1005 | "value": "Flash Comics", 1006 | "nodeType": "text" 1007 | } 1008 | ], 1009 | "nodeType": "hyperlink" 1010 | }, 1011 | { 1012 | "data": { 1013 | }, 1014 | "marks": [ 1015 | ], 1016 | "value": " #1 (cover date January 1940/release month November 1939).", 1017 | "nodeType": "text" 1018 | }, 1019 | { 1020 | "data": { 1021 | "uri": "https://en.wikipedia.org/wiki/Flash_(comics)#cite_note-dc-ency-1" 1022 | }, 1023 | "content": [ 1024 | { 1025 | "data": { 1026 | }, 1027 | "marks": [ 1028 | ], 1029 | "value": "[1]", 1030 | "nodeType": "text" 1031 | } 1032 | ], 1033 | "nodeType": "hyperlink" 1034 | }, 1035 | { 1036 | "data": { 1037 | }, 1038 | "marks": [ 1039 | ], 1040 | "value": "\n Nicknamed the \"Scarlet Speedster\", all incarnations of the Flash \npossess \"super speed\", which includes the ability to run, move, and \nthink extremely fast, use superhuman reflexes, and seemingly violate \ncertain ", 1041 | "nodeType": "text" 1042 | }, 1043 | { 1044 | "data": { 1045 | "uri": "https://en.wikipedia.org/wiki/Physical_law" 1046 | }, 1047 | "content": [ 1048 | { 1049 | "data": { 1050 | }, 1051 | "marks": [ 1052 | ], 1053 | "value": "laws of physics", 1054 | "nodeType": "text" 1055 | } 1056 | ], 1057 | "nodeType": "hyperlink" 1058 | }, 1059 | { 1060 | "data": { 1061 | }, 1062 | "marks": [ 1063 | ], 1064 | "value": ".", 1065 | "nodeType": "text" 1066 | } 1067 | ], 1068 | "nodeType": "paragraph" 1069 | } 1070 | ], 1071 | "nodeType": "document" 1072 | } 1073 | }, 1074 | "author": { 1075 | "en-US": { 1076 | "sys": { 1077 | "type": "Link", 1078 | "linkType": "Entry", 1079 | "id": "3U15aVKAa0H1hdI6pwA0UN" 1080 | } 1081 | } 1082 | } 1083 | } 1084 | } 1085 | ], 1086 | "assets": [ 1087 | { 1088 | "sys": { 1089 | "space": { 1090 | "sys": { 1091 | "type": "Link", 1092 | "linkType": "Space", 1093 | "id": "b7km0t64rdcd" 1094 | } 1095 | }, 1096 | "id": "6PsEXzp4l2Doyqm1F41opi", 1097 | "type": "Asset", 1098 | "createdAt": "2019-11-09T14:49:37.104Z", 1099 | "updatedAt": "2019-11-09T14:50:14.575Z", 1100 | "environment": { 1101 | "sys": { 1102 | "id": "master", 1103 | "type": "Link", 1104 | "linkType": "Environment" 1105 | } 1106 | }, 1107 | "publishedVersion": 10, 1108 | "publishedAt": "2019-11-09T14:50:14.575Z", 1109 | "firstPublishedAt": "2019-11-09T14:50:14.575Z", 1110 | "createdBy": { 1111 | "sys": { 1112 | "type": "Link", 1113 | "linkType": "User", 1114 | "id": "79hib8nZlbmYwD4Qnkbpge" 1115 | } 1116 | }, 1117 | "updatedBy": { 1118 | "sys": { 1119 | "type": "Link", 1120 | "linkType": "User", 1121 | "id": "79hib8nZlbmYwD4Qnkbpge" 1122 | } 1123 | }, 1124 | "publishedCounter": 1, 1125 | "version": 11, 1126 | "publishedBy": { 1127 | "sys": { 1128 | "type": "Link", 1129 | "linkType": "User", 1130 | "id": "79hib8nZlbmYwD4Qnkbpge" 1131 | } 1132 | } 1133 | }, 1134 | "fields": { 1135 | "title": { 1136 | "en-US": "Batman" 1137 | }, 1138 | "description": { 1139 | "en-US": "About batman" 1140 | }, 1141 | "file": { 1142 | "en-US": { 1143 | "url": "//images.ctfassets.net/b7km0t64rdcd/6PsEXzp4l2Doyqm1F41opi/7002dce32b08986903fb5681861bc765/batman.jpg", 1144 | "details": { 1145 | "size": 123331, 1146 | "image": { 1147 | "width": 1280, 1148 | "height": 720 1149 | } 1150 | }, 1151 | "fileName": "batman.jpg", 1152 | "contentType": "image/jpeg" 1153 | } 1154 | } 1155 | } 1156 | }, 1157 | { 1158 | "sys": { 1159 | "space": { 1160 | "sys": { 1161 | "type": "Link", 1162 | "linkType": "Space", 1163 | "id": "b7km0t64rdcd" 1164 | } 1165 | }, 1166 | "id": "7hlEFYl579kGDEEbfylxvC", 1167 | "type": "Asset", 1168 | "createdAt": "2019-11-09T15:14:28.870Z", 1169 | "updatedAt": "2019-11-09T15:14:58.109Z", 1170 | "environment": { 1171 | "sys": { 1172 | "id": "master", 1173 | "type": "Link", 1174 | "linkType": "Environment" 1175 | } 1176 | }, 1177 | "publishedVersion": 9, 1178 | "publishedAt": "2019-11-09T15:14:58.109Z", 1179 | "firstPublishedAt": "2019-11-09T15:14:58.109Z", 1180 | "createdBy": { 1181 | "sys": { 1182 | "type": "Link", 1183 | "linkType": "User", 1184 | "id": "79hib8nZlbmYwD4Qnkbpge" 1185 | } 1186 | }, 1187 | "updatedBy": { 1188 | "sys": { 1189 | "type": "Link", 1190 | "linkType": "User", 1191 | "id": "79hib8nZlbmYwD4Qnkbpge" 1192 | } 1193 | }, 1194 | "publishedCounter": 1, 1195 | "version": 10, 1196 | "publishedBy": { 1197 | "sys": { 1198 | "type": "Link", 1199 | "linkType": "User", 1200 | "id": "79hib8nZlbmYwD4Qnkbpge" 1201 | } 1202 | } 1203 | }, 1204 | "fields": { 1205 | "title": { 1206 | "en-US": "The flash" 1207 | }, 1208 | "description": { 1209 | "en-US": "The flash" 1210 | }, 1211 | "file": { 1212 | "en-US": { 1213 | "url": "//images.ctfassets.net/b7km0t64rdcd/7hlEFYl579kGDEEbfylxvC/1cb85e713fc4c534c46a339b1a1e0604/flash.jpg", 1214 | "details": { 1215 | "size": 113653, 1216 | "image": { 1217 | "width": 1200, 1218 | "height": 628 1219 | } 1220 | }, 1221 | "fileName": "flash.jpg", 1222 | "contentType": "image/jpeg" 1223 | } 1224 | } 1225 | } 1226 | } 1227 | ], 1228 | "locales": [ 1229 | { 1230 | "name": "English (United States)", 1231 | "code": "en-US", 1232 | "fallbackCode": null, 1233 | "default": true, 1234 | "contentManagementApi": true, 1235 | "contentDeliveryApi": true, 1236 | "optional": false, 1237 | "sys": { 1238 | "type": "Locale", 1239 | "id": "5C7Q5g26vPyLHG4MzNjDOq", 1240 | "version": 1, 1241 | "space": { 1242 | "sys": { 1243 | "type": "Link", 1244 | "linkType": "Space", 1245 | "id": "b7km0t64rdcd" 1246 | } 1247 | }, 1248 | "environment": { 1249 | "sys": { 1250 | "type": "Link", 1251 | "linkType": "Environment", 1252 | "id": "master" 1253 | } 1254 | }, 1255 | "createdBy": { 1256 | "sys": { 1257 | "type": "Link", 1258 | "linkType": "User", 1259 | "id": "79hib8nZlbmYwD4Qnkbpge" 1260 | } 1261 | }, 1262 | "createdAt": "2019-10-30T11:45:40Z", 1263 | "updatedBy": { 1264 | "sys": { 1265 | "type": "Link", 1266 | "linkType": "User", 1267 | "id": "79hib8nZlbmYwD4Qnkbpge" 1268 | } 1269 | }, 1270 | "updatedAt": "2019-10-30T11:45:40Z" 1271 | } 1272 | } 1273 | ] 1274 | } -------------------------------------------------------------------------------- /dump/images.ctfassets.net/b7km0t64rdcd/6PsEXzp4l2Doyqm1F41opi/7002dce32b08986903fb5681861bc765/batman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ScreamZ/react-contentful-nextjs-tutorial/aae701d3352d1ca37ac83a3535c2e45054937a3e/dump/images.ctfassets.net/b7km0t64rdcd/6PsEXzp4l2Doyqm1F41opi/7002dce32b08986903fb5681861bc765/batman.jpg -------------------------------------------------------------------------------- /dump/images.ctfassets.net/b7km0t64rdcd/7hlEFYl579kGDEEbfylxvC/1cb85e713fc4c534c46a339b1a1e0604/flash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ScreamZ/react-contentful-nextjs-tutorial/aae701d3352d1ca37ac83a3535c2e45054937a3e/dump/images.ctfassets.net/b7km0t64rdcd/7hlEFYl579kGDEEbfylxvC/1cb85e713fc4c534c46a339b1a1e0604/flash.jpg -------------------------------------------------------------------------------- /import.json: -------------------------------------------------------------------------------- 1 | { 2 | "spaceId": "your_space_id_here", 3 | "managementToken": "your_content_management_key_here", 4 | "content-file": "dump/export.json" 5 | } 6 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = {}; 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "screamz-contentful-nextjs", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "export": "next export" 10 | }, 11 | "dependencies": { 12 | "@contentful/rich-text-html-renderer": "^13.4.0", 13 | "contentful": "^7.10.0", 14 | "next": "9.1.2", 15 | "react": "16.11.0", 16 | "react-dom": "16.11.0" 17 | }, 18 | "devDependencies": { 19 | "contentful-cli": "^1.1.5" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Head from "next/head"; 3 | import { createClient } from "contentful"; 4 | import Post from "../components/post"; 5 | import config from "../config.json"; 6 | 7 | // Instantiate the app client 8 | const client = createClient({ 9 | space: config.space, 10 | accessToken: config.accessToken 11 | }); 12 | 13 | // Our Homepage component, will receive props from contentful entries thanks to getInitialProps function below. 14 | function HomePage(props) { 15 | return ( 16 | 17 | 18 | Welcome to NextJS + Contentful by ScreamZ 19 | 20 | 21 | 22 | 23 |
24 |
25 | {props.allPosts && props.allPosts.map(post => )} 26 |
27 |
28 | 29 | ); 30 | } 31 | 32 | // This function will run during build time in case of static export. 33 | // Or will run each time a new request is made to the browser in SSR. 34 | // It's used to compute initial props for the component and pre-render. 35 | HomePage.getInitialProps = async () => { 36 | // Get every entries in contentful from type Article, sorted by date. 37 | // article is the ID of the content model we created on the dashboard. 38 | const entries = await client.getEntries({ 39 | content_type: "article", 40 | order: "-fields.date" 41 | }); 42 | 43 | // Inject in props of our screen component 44 | return { allPosts: entries.items }; 45 | }; 46 | 47 | // That's the default export (the page) 48 | export default HomePage; 49 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ScreamZ/react-contentful-nextjs-tutorial/aae701d3352d1ca37ac83a3535c2e45054937a3e/public/favicon.ico --------------------------------------------------------------------------------