react-styled-components: styled navbar

In this challenge we want to style the Link component from Next.js. This simple app has 3 pages that we can navigate between with the navbar in _app.js.

Task

Switch to the ./pages/_app.js file and make something great happen!

  • Style the Link so that there is no underline. Hint: Check the handout for an example of how to do this. Additional hint: we can set the following to none.
  • Style the Link so that the Link gets underlined on hover.

Notes

  • You only have to touch the ./pages/index.js file.

Development

Local Development

To work locally, please install the dependencies using npm i first.

Run npm run dev to start a development server and open the displayed URL in a browser.

Use npm run test to run the tests.

CodeSandbox Cloud

Select the "Preview: 3000" tab to view this project.

Select the "Tests: logs" tab to view the tests.

The npm run dev and npm run test scripts run automatically.

Scripts

You can use the following commands:

  • npm run dev to start a development server
  • npm run build to build the project
  • npm run start to start a production server
  • npm run test to run the tests
  • npm run lint to run the linter