news-site Tailwind Templates

News Site

A news site with the latest headlines. | Built with: Next, News API, Tailwind CSS, SCSS.

Simple News

GIF of the text 'News' repeatedly entering and exiting

This is a Next.js project bootstrapped with create-next-app.

Built with Next, News API, Tailwind CSS, SCSS.


Getting Started

First, make sure you install the dependencies:

npm ci

Second, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.jsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.


Telemetry

What is Telemetry?
Telemetry is the practice of gathering completely anonymous telemetry data about general usage.

By default, Next.js applications come with telemetry enabled.
For this repository, telemetry has been disabled.

However, should you find yourself needing to enable, disable, or check the status of telemetry, you can use the respective commands:

Enable telemetry:

npx next telemetry enable
# Or
yarn next telemetry enable

Disable telemetry:

npx next telemetry disable
# Or
yarn next telemetry disable

Check telemetry status:

npx next telemetry status
# Or
yarn next telemetry status

See Next.js telemetry documentation for more details.


Configuring ESLint

First, let's remind ourselves of what ESLint and Prettier are:

What is ESLint?
ESLint is a is a tool that alalyzes your code for style and coding errors that can lead to bugs, and offers suggestions on how to fix them.

Since ESLint is already configured at the project/repository level (with dev dependencies, .eslintrc.json), you should only have to do the following:

1. Install the VSCode ESLint extension.

2. Copy and paste the following settings in to your VSCode settings.json file:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "editor.formatOnSave": true,
  // ESLint
  "eslint.format.enable": true,
  "eslint.validate": ["javascript", "javascriptreact", "vue"]
}

See the guide that was used to install and configure ESLint.

Top categories

tailwind logo

Need a Tailwind website built?

Hire a professional TailwindCSS developer today.
Loading Svelte Themes