netlify-templates / nextjs-toolbox Goto Github PK

Summary

Update information about package details such as author, versions, etc.

Summary

To make sure that our project stays up to date we'd like to add some tools:

• Cypress integration (for testing e2e, ref doc here)
• Renovate (for dependency management)
  add 'renovate.json` to project root

  {
    "$schema": "https://docs.renovatebot.com/renovate-schema.json",
    "extends": [
      "local>netlify-templates/renovate-config"
    ]
  }
  

• Disable dependabot secutrity and version update alerts
• Make sure to update the README on how to remove everything
  • add section on cypress removal
  • add section on removing renovate json file
  • add comment at top of renovate json saying it can be removed if not using renovate

We want folks to know how to use our projects and Tara has already created a lovely video walkthrough for it all, so let's make sure that we can give people more resources!

Video Link: https://www.youtube.com/watch?v=wI-2XBMYybw

Let's add a lovely collaboration banner for Next.js + Netlify to the README!

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• fix(deps): update dependency cypress to v13.13.2

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Summary

We will implement a redirect using the _redirects file. This file takes the highest priority for Netlify when performing redirects. We can show how and where to place this (i.e. the public/ folder). And put in the example of redirecting our function.

• padding issue
• overflow/scrolling issue

to match the nuxt toolbox, we should display the random joke on the home page

Summary

Make a comprehensive readme about the features we're utilizing. Think about also adding a section for what could a second deploy feature potential. Such as adding a plugin or introducing env vars through CLI.

Summary

Utilize a Netlify Form. This will be a contact form example. We can demonstrate the the netlify attribute. We can show off the honeypot technique as well. And then in the README, we mention that they can see their form submissions within the UI.

• Name
• Email
• Body

event - compiled client and server successfully in 77 ms (193 modules)
Warning: Invalid DOM property `for`. Did you mean `htmlFor`?
    at label
    at form
    at FeedbackForm
    at main
    at div
    at Home
    at Application (webpack-internal:///./pages/_app.js:11:24)
    at InnerApp
    at StyleRegistry (/Users/tzmanics/Documents/NETLIFY/CODE/TEMPLATES/nextjs-toolbox/node_modules/styled-jsx/dist/stylesheet-registry.js:231:34)
    at AppContainer (/Users/tzmanics/Documents/NETLIFY/CODE/TEMPLATES/nextjs-toolbox/node_modules/next/dist/server/render.js:340:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/tzmanics/Documents/NETLIFY/CODE/TEMPLATES/nextjs-toolbox/node_modules/next/dist/server/render.js:370:57)
    at div
    at Body (/Users/tzmanics/Documents/NETLIFY/CODE/TEMPLATES/nextjs-toolbox/node_modules/next/dist/server/render.js:638:21)

due to label for= code like here:

Summary

We should assign these properties to our GitHub repository for discoverability and also for explaining what our project is at a high-level glance for folks.

Summary

While this project uses a plugin for supporting Next.js, we want to show case how to integrate another plugin with our project such as @netlify/a11y-plugin. This would be another addition within the netlify.toml as opposed to through the UI.

tell users what this project is on the landing page

Not sure about the policy in this matter, but I've found one inconsistency while trying to run the project.

When I spinned up this project on netlify from the github repo, everything works fine out of the box. It worked both for manual installation (creating repo first and then importing to netflify) and the direct start from the templates.

The problem occured when I tried to run the same project from the bitbucket repo. I couldn't find any explicit error, but the page hasn't been deployed correctly. Deploy was successful with cypress errors and page was not found when visiting the production url.

After digging up I've finally realised that when you spin up the project from github, netlify detects that this is a next.js app and applies the @netlify/plugin-nextjs plugin under the hood (it's visible in the UI plugins section). In case of bitbucket I had to do that step manually within the UI or add config section:

[[plugins]]
  package = "@netlify/plugin-nextjs"

along with adding proper dev dependency to package.json.

If this plugin is required to correctly run the app in the netlify, maybe it's better to add it to the config, to avoid inconsistencies across multiple git providers? Alternatively netlify plugin that autodetects the project's framework could be improved, but IMHO explicit dependencies seems to be cleaner and allow to avoid similar issues in the future.

Thanks for the starter anyway. It's really helpful! :)

Summary

Review the active branches so far under renovate and update all the dependences.

Replit: Updating package configuration

--> npm install @components/Footer @components/Header @components/JokeBlock @styles/globals.css next @components/FeedbackForm
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@components%2fFeedbackForm - Not found
npm ERR! 404
npm ERR! 404 '@components/FeedbackForm@*' is not in this registry.
npm ERR! 404 This package name is not valid, because
npm ERR! 404 1. name can no longer contain capital letters
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/runner/.npm/_logs/2022-05-28T07_50_42_686Z-debug.log
exit status 1

Summary

We need to create a Netlify Function. We can start with a function that will return a random joke when we make a request to it. This can help us show how to abstract data files away from function code and show that we can import it!

Related to #10, it would be good to share how to utilize the _redirects file way of doing things. If there are certain cases where this would be preferred as opposed to in the TOML.

The advantage of the TOML way is that it allows folks to see all Netlify features at once. But the drawback is that it is processed after the _redirects file. Whereas the _redirects file's downside is that it needs to be put in the right place for a project (e.g. in this project it would need to be placed in the public/ directory).

I'd love other's perspective on this!

set up linter and prettier file similar to https://github.com/netlify-templates/nextjs-blog-theme