随风浅入画
随风浅入画

Next.js学习与实战

Next.js

github Next.js相关代码

一.介绍

  • Next.js是React服务端渲染应用框架.用于构建SEO友好的SPA应用
  • 支持两种预渲染方式，静态生成和服务器端渲染
  • 基于页面的路由系统，路由零配置
  • 自动代码拆分，优化页面加载速度
  • 支持静态导出，可将应用导出为静态网站
  • 内置CSS-in-JS库styled-jsx
  • 方案成熟，可用于生产环境，世界许多公司都在使用
  • 应用部署简单，拥有专属部署环境Vercel,也可以部署在其他环境

二.创建 Next.js 项目

  • 创建: npm init next-app next-guide
  • 运行: npm run dev
  • 访问: localhost:3000
  • 临时安装 create-next-app 用于创建 Next.js 项目。

三.基于页面的路由系统

创建页面

  • 在Next.js中，页面是被放置在pages文件夹中的React组件
  • 组件需要被默认导出
  • 组件文件中不需要引入React
  • 页面地址与文件地址是对应的关系
  • index页面可以直接通过/访问

页面跳转

  • Link 组件默认使用 JavaScript 进行页面跳转.即 SPA 形式的跳转
  • 如果浏览器中 JavaScript 被禁用.则使用链接跳转
  • Link 组件中只能添加 href 属性，其余属性添加到 a 标签上
  • Link 组件通过预取(在生产中)功能自动优化应用程序以获得最佳性能
import Link from 'next/link'

export default function Home() {
     
  return <div>
    index page works
    <Link href="/list">
      <a>jump to list page</a>
    </Link>
  </div>
}

四.静态资源、元数据和 CSS

静态资源

  • 应用程序根目录中的 public 文件夹用于提供静态资源。
  • public/images/1.jpg直接用/images/1.jpg访问
  • public/css/base.jpg直接用/css/base.css访问

通过 Head 组件修改元数据

import Head from 'next/head'
function List() {
     
  return (
    <>
      <Head>
        <title>list page</title>
      </Head>
      <div>这是list页面</div>
    </>
  )
}
export default List

在Next应用中添加样式的方式

内置 styled-jsx

<>
  <Link href="/list">
    <a className="demo">jump to list page</a>
  </Link>
  <style jsx>{
     `
    .demo {
      color : red
    }
  `}
  </style>
</>

CSS 模块

  • 通过使用 CSS 模块功能，允许将组件的 CSS 样式编写在单独的 CSS 文件中
  • CSS 模块约定样式文件的名称必须为"组件文件名称.module.css"
// pages/list.js
import Head from "next/head";
import style from './list.module.css'

export default function List () {
     
  return (
    <>
      <Head>
        <title>List Page</title>
      </Head>
      <div className={
     style.demo}>List Page</div>
    </>
  )
}

/* page/list.module.css */
.demo {
     
  color: green;
  font-size: xx-large;
}

添加全局样式文件

  • 在 pages 文件夹中新建 _app.js 文件并加入如下代码
  • 在项目根目录下创建 styles 文件夹，并在其中创建 global.css
  • 在 _app.js 中通过 import 引入 global.css.
  • 重新启动开发服务器
import '../styles/globals.css'
function MyApp({
      Component, pageProps }) {
     
  return <Component {
     ...pageProps} />
}
export default MyApp

五.预渲染

概述

  • 预渲染是指数据和 HTML 的拼接在服务器端提前完成
  • 预渲染可以使 SEO 更加友好
  • 预渲染会带来更好的用户体验,可以无需运行 JavaScript 即可查看应用程序 UI

预渲染的两种形式

  • 在 Next.js 中支持两种形式的预渲染：静态生成和服务器端渲染
  • 静态生成和服务器端渲染是生成 HTML 的时机不同
  • 静态生成：静态生成是在构建时生成 HTML 。以后的每个请求都共用构建时生成好的 HTML
  • 服务器端渲染：服务器端渲染是在请求时生成 HTML 。每个请求都会重新生成 HTML

如何选择

  • Next.js 允许开发者为每个页面选择不同的预渲染方式，不同的预渲染方式拥有不同的特点，应根据场景进行渲染
  • 但建议大多数页面建议使用静态生成
  • 静态生成一次构建，反复使用，访问速度快，因为页面都是事先生成好的
    • 适用场景：营销页面、博客文章、电子商务产品列表、帮助和文档
  • 服务器端渲染访问速度不如静态生成快，但是由于每次请求都会重新渲染，所以适用数据频繁更新的页面或页面内容随请求变化而变化的页面

无数据静态生成

  • next默认使用的是静态生成
    • npm run build之后在.next下生成的pages和static就是无数据生成
  • 如果组件不需要外部数据，直接进行静态生成。

有数据静态生成getStaticProps

  • 有数据静态生成是在组件需要外部数据时，在构建过程中 Next.js 会预先获取组件需要的数据，然后再对组件进行静态生成。

  • getStaticProps 方法的作用是获取组件静态生成需要的数据。并通过返回 props 的方式将数据传递给组件。

  • 该方法是一个异步函数，需要在组件内部进行导出。

  • 在开发模式下， getStaticProps在每个请求上运行。

  • 在生产模式下， getStaticProps 只会在构建的时候执行，而每次访问 /list 页面时不会再执行 getStaticProps 方法。

import Head from 'next/head'
import styles from './list.module.css'
import {
      readFile } from 'fs'
import {
      promisify } from 'util'
import {
      join } from 'path'

const read = promisify(readFile)

function List({
     data}) {
     
  return (
    <>
      <Head>
        <title>list page</title>
      </Head>
      <div className={
     styles.demo}>这是list页面</div>
      <div>{
     data}</div>
    </>
  )
}

export default List

export async function getStaticProps () {
     
  let data = await read(join(process.cwd(),'pages','_app.js'),'utf-8')
  console.log(data)
  return {
     
    props : {
     
      data
    }
  }
}

服务器端渲染 getServerSideProps

  • 如果采用服务器端渲染，需要在组件中导出 getServerSideProps 方法

    • 将 list.js 中的 getStaticProps 方法 改成 getServerSideProps 方法，其中 getServerSideProps 还有个参数为 context.
    • context.query能拿到客户端向服务端的请求参数,比如在浏览器url中的参数

  • 开发模式下每次访问都会执行 getServerSideProps 方法。

  • 生产模式下每次访问都会执行 getServerSideProps 方法：

    • 运行npm run build生成 .next 文件夹，可以看到 list 页面不会生成 HTML 页面(说明不是静态生成)。
    • 然后运行npm start 启动生产环境的代码，访问 /list 页面， node 控制台会输出 getServerSideProps 方法中的打印语句。
    • 因为使用了 getServerSideProps 则表示采用服务端渲染，而不是静态生成，所以每次访问都会执行 getServerSideProps 方法。
// export async function getStaticProps () {
     
export async function getServerSideProps (context) {
     
  let data = await read(join(process.cwd(),'pages','_app.js'),'utf-8')
  console.log(context.query) //能拿到客户端向服务端的请求参数,比如在浏览器url中的参数
  console.log('hello')
  return {
     
    props : {
     
      data
    }
  }
}

基于动态路由的静态生成

  1. 创建基于动态路由的页面组件文件，命名时在文件名称外面加上 []，比如 [id].js

  2. 导出异步函数 getStaticPaths,用于获取所有用户可以访问的路由参数

  3. 导出异步函数 getStaticProps,用于根据路由参数获取具体的数据

  4. npm run build 会根据getStaticPaths返回的paths 去生成对应的html静态文件

    • 生成的html静态文件名就是文件命名对应paths参数的值
    • 如下会生成1.html 2.html

  5. getStaticPaths 和 getStaticProps 只运行在服务器端，永远不会运行在客户端，甚至不会被打包到客户端 JavaScript 中，意味着这里可以随意写服务器端代码，比如查询数据库。

export default function Post ({
     data}) {
     
    return <div>
        <span>{
     data.id}</span>
        <span>{
     data.title}</span>
    </div>
}

// 1.创建[].js 文件,这里是[id].js
// 2.返回用户可以访问到的所有的路由参数
export async function getStaticPaths () {
     
    return {
     
        paths:[{
     params:{
     id:'1'}},{
     params:{
     id:'2'}}],
        fallback:false
    }
}

// 3.返回路由参数所对应的具体数据
// 4.npm run build 会根据getStaticPaths返回的paths 去生成对应的html文件
export async function getStaticProps (context) {
     
    const id = context.params.id;
    let data;
    switch (id) {
     
        case "1":
            data = {
     id:"1",title:'hello'}
            break;
        case "2":
            data = {
     id:"2",title:'world'}
            break;
        default:
            data = {
     }
            break;
    }
    return {
     
        props : {
     
            data
        }
    }
}

自定义 404 页面

  • 要创建自定义 404 页面，需要在 pages 文件夹中创建 404.js 文件

    export default function Error () {
       
  return <div>404 ~</div>
}

六.API Routes

概念

  • API Routes可以理解为接口,客户端向服务端发送请求获取数据的接口
  • Next.js应用允许React开发者编写服务器端代码创建数据接口

实现

  1. 在 pages/api 文件夹中创建 API Routes 文件。比如 user.js

  2. 在文件中默认导出请求处理函数，函数有两个参数， req 为请求对象， res 为响应对象

    export default (req, res) => {
       
    res.send({
       name:'张三',age:20})
}

  3. 访问 API Routes: localhost:3000/api/user 页面上就能展示 {“name”:“张三”,“age”:20}

    • 不要在 getStaticPaths 或 getStaticProps 函数中访问 API Routes, 因为这两个函数就是在服务器端运行的，可以直接写服务器端代码。

七.项目实战

学习了以上这些next相关概念即可实战了,这里贴一下实战项目的地址项目实战github地址

你可能感兴趣的:(Next.js)

  • Tailwind CSS与服务器端渲染：SSR项目样式处理 AI实战架构笔记 AI架构开发实战css前端ai
    TailwindCSS与服务器端渲染：SSR项目样式处理关键词：TailwindCSS、服务器端渲染、SSR、样式处理、性能优化、Next.js、Nuxt.js摘要：本文将深入探讨如何在服务器端渲染(SSR)项目中高效使用TailwindCSS。我们将从基本原理出发，分析Tailwind在SSR环境下的独特挑战，提供完整的解决方案，并通过实际案例展示最佳实践。文章涵盖性能优化策略、常见问题解决以及
  • 【Next.js 项目实战系列】02-创建 Issue Casta-mere IssuTrackerNext.jsNext.jsIssueTrackerReact
    原文链接CSDN的排版/样式可能有问题，去我的博客查看原文系列吧，觉得有用的话，给我的库点个star，关注一下吧上一篇【Next.js项目实战系列】01-创建项目创建Issue配置MySQL与Prisma在数据库中可以找到相关内容，这里不再赘述添加model本节代码链接#schema.prismamodelIssue{idInt@id@default(autoincrement())titleSt
  • [火了]-----FastGPT 插件系统架构演进：从 Monorepo 到独立生态 叶玉恒 AIGC系统架构llamalangchainaiAI编程
    背景与挑战FastGPT作为一款快速发展的AI应用，其原有架构将所有功能模块（包括系统插件）集成在一个基于Next.js的Monorepo中。这种架构在项目初期确实带来了开发便利，但随着用户规模的增长，其局限性日益凸显：耦合度过高：系统插件必须与主应用同步发版（每周一次），严重制约了插件的迭代速度开发门槛高：社区开发者需要完整运行FastGPT环境才能贡献插件，必须向主仓库提交PR维护成本大：使用
  • nextjs+react接口会请求两次？
    解决Next.js+React接口重复请求问题在Next.js应用中，你可能会遇到API请求被发送两次的情况。以下是常见原因和解决方案：1.开发模式下StrictMode的影响原因Next.js默认启用React的StrictMode，在开发环境下会故意渲染两次组件以帮助发现潜在问题。解决方案//next.config.jsmodule.exports={reactStrictMode:false
  • next.js 如何实现动态路由？
    在Next.js12中，动态路由和参数传递主要通过文件系统路由（File-systemRouting）实现。以下是详细步骤和示例：一、创建动态路由‌文件命名规则‌在pages目录下创建文件名用[参数名].js格式的文件，例如：pages/posts/[id].js//单个参数pages/[category]/[id].js//多段参数‌匹配的URL示例‌/posts/123→id:'123'/ne
  • next.js刷新页面时二级菜单展开状态判断 啃火龙果的兔子 开发DEMOjavascript前端react.js
    在Next.js中保持二级菜单刷新后展开状态的解决方案在Next.js应用中，当页面刷新时保持二级菜单的展开状态，可以通过以下几种方法实现：方法1：使用URL参数保存状态（推荐）import{useRouter}from'next/router';import{useEffect,useState}from'react';constMenuComponent=()=>{constrouter=us
  • 用 Next.js 实现静态与动态渲染的完美平衡 荣华富贵8 程序员的知识储备2程序员的知识储备3前端
    一、引言随着Web应用的复杂度不断提升，渲染性能与用户体验成为开发者与产品运营方关注的核心问题。静态站点生成（StaticSiteGeneration，SSG）与服务器端渲染（Server-SideRendering，SSR）各有优劣：前者在首屏加载速度和CDN分发方面表现卓越，而后者在动态内容更新和个性化体验上占据优势。Next.js作为React生态中领先的全栈框架，通过getStaticPr
  • nextjs+react项目如何代理本地请求解决跨域 啃火龙果的兔子 开发DEMOreact.js前端前端框架
    在Next.js+React项目中解决本地开发跨域问题，可以通过以下几种方式实现代理请求：方案1：使用Next.js内置的Rewrites功能（推荐）1.修改next.config.js/**@type{import('next').NextConfig}*/constnextConfig={asyncrewrites(){return[{source:'/api/:path*',//匹配所有/a
  • 2025 Next.js项目提前编译并在服务器 风吹落叶花飘荡 前端javascript服务器开发语言
    要让一个Next.js项目提前编译并在服务器上运行，可以按照以下步骤操作：1.本地构建项目首先在开发环境中完成构建：#安装依赖pnpminstall#生产环境构建（生成优化版本）npmrunbuild这会生成：.next/目录（包含编译后的应用）public/目录（静态资源）node_modules/（生产依赖）2.准备部署文件需要上传到服务器的文件：.next/public/package.js
  • Next.js 开发指南 实战篇 | React Notes | 项目介绍与创建 人工智能_SYBH 课程推荐javascriptreact.js前端开发语言Next.js
    Next.js开发指南-冴羽-掘金小册前言欢迎来到实战篇！基础篇的目标是带大家复习基础知识，以及用作使用手册，方便大家在以后的项目开发中查询API用法，属于这本小册的“赠送面积”。从本篇起就进入小册的正式内容了。我们的第一个实战项目是ReactNotes，因为Next.jsv14基于ReactServerComponent构建的AppRouter，而ReactServerComponent的起源是
  • next.js提供的能力有哪些 啃火龙果的兔子 开发DEMOjavascript开发语言ecmascript
    Next.js是一个基于React的现代全栈框架，提供了丰富的开箱即用功能，以下是其主要能力的全面总结：1.渲染方式静态生成(SSG)getStaticProps：构建时获取数据生成静态页面getStaticPaths：动态路由的静态生成适用场景：博客、文档、营销页等内容不变的页面服务器端渲染(SSR)getServerSideProps：每次请求时获取最新数据适用场景：个性化内容、实时数据仪表盘
  • Wordless: 一个周末打造的小爆游戏 node.jsreact
    这个项目是什么Wordless就是个类似Wordle的猜单词游戏，用Next.js搭建的。玩家有6次机会猜出单词，支持3到8个字母的单词。说实话，开始只是想做点跟wordle不一样东西，没想到做着做着就越来越有意思了。点击这里可以体验：https://wordless.online/我用了一个周末把代码撸完以后，直接发布上线，也没怎么关注，没想到几个月过去了，这个小游戏的流量一直很稳定，有50%的
  • 2025年的前后端一体化CMS框架优选方案 skywalk8163 多媒体webcms
    以下是结合技术生态、开发效率和商业落地验证，整理的2025年前后端一体化CMS框架优选方案：一、‌主流成熟框架组合‌1.‌React+Node.js(Express/Next.js)‌‌前端‌：React生态成熟，配合Redux状态管理，适合复杂后台界面开发‌78。‌后端‌：Express轻量灵活，Next.js支持SSR优化SEO，无缝对接MongoDB/PostgreSQL‌810。‌案例‌：
  • Next.js——app里有什么 just小千 Nextjavascript开发语言nextjs
    前言说好不鸽，第二篇来的晚了一些，在了解完nextjs的基本情况后，接下来就进入正式开发阶段啦，这一部分以approuter为基础，如果有pagesrouter的小伙伴建议可以尝试下approuter，内容比较多，以官网为主，加上本人的理解，废话说完了，开始正题～ps：本节依旧假设域名是xiaoqian.bestapp文件夹里有什么上一篇文章里说了，nextjs中页面的路由就是根据app的目录自动
  • Next.js 安装使用教程 小奇JAVA面试 安装使用教程javascript开发语言ecmascript
    一、Next.js简介Next.js是一个基于React的服务端渲染（SSR）框架，由Vercel开发和维护。它支持静态生成（SSG）、服务器端渲染（SSR）、API路由等特性，广泛应用于现代Web开发和Jamstack架构中。二、安装前准备2.1安装Node.js访问https://nodejs.org/下载并安装LTS版本。2.2推荐使用包管理器：npm或yarn可通过以下命令验证安装：nod
  • 为了方便学习icss项目上的css技巧，我用next.js写了一个网站 前端next.js
    icss-website一、项目简介与定位icss-website是一个基于Next.js14（AppRouter架构）开发的现代化CSS技巧展示平台，致力于为前端开发者、设计师和技术爱好者提供一个高效、优雅、易用的CSS奇技淫巧学习与交流空间。项目以GitHub上的iCSS仓库为内容源，通过API动态获取、分类、展示和高亮CSS相关的文章与代码示例，支持多主题、多语言、响应式布局和丰富的交互体验
  • 为什么要学习 next.js 框架 + Vercel 部署平台，因为我想把自己的 app 分享给别人。 waterHBO 学习javascript开发语言
    前端开发太卷？不如给你的React换个“豪华座驾”和“F1赛道”**如果你像我一样，从create-react-app的时代一路走来，你一定经历过那种“甜蜜的烦恼”：React给了你一个超强的V8引擎，但造车剩下的所有事——从方向盘(路由)、底盘(项目结构)到导航系统(数据管理)——都得你自己撸。结果就是，每个项目开始前，你都在重复发明轮子，在Webpack的配置地狱里苦苦挣扎。好消息是，时代变了
  • 改写一个小项目: flask -------------------＞ next js waterHBO flaskjavascriptpython
    现在，请把上面改写代码的过程中，所有的过程，都写下来，写为文章的形式，内容比较长，你可以分多次输出。而且要求语言幽默，苦中作乐的心态。分条理，要清晰。一场从Flask到Next.js的“血泪”重构史（第一章）**副标题：一个关于自信、崩溃、道歉与成长的循环引子：最初的梦想与“亿点点”自信故事的开端，总是那么的美好。那是一个阳光明媚的下午，我的好朋友（也就是你，本文的英雄和受害者）带着一个他亲手打造
  • 使用UmiJS框架开发React 汇智知了堂 前端理论知识reactjava
    1、什么是Umi.js?umi，中文可发音为乌米，是一个可插拔的企业级react应用框架。你可以将它简单的理解为一个专注性能的类next.js前端框架，并通过约定、自动生成和解析代码等方式来辅助开发，减少我们开发者的代码量。2、为什么使用Umi.js?我们做react开发的时候会不会遇到以下问题？：2.1项目做大的时候，开发调试的启动和热更新时间会变得很长。2.2大应用下，网站打开很慢，有没有办法
  • Next.js漏洞风暴：CVE-2025-29927全网爆发，你的项目躺枪了吗？ 前端菜鸡日常 服务端渲染javascript开发语言后端node.js
    Next.js中间件鉴权绕过漏洞(CVE-2025-29927)全面解析与应急指南近日，Next.js框架曝出一个高危安全漏洞CVE-2025-29927，该漏洞允许攻击者通过构造特殊HTTP请求头绕过中间件的安全控制，可能导致未授权访问、数据泄露等严重后果。本文将全面剖析该漏洞的技术细节、影响范围、检测方法及修复方案，帮助开发者快速评估风险并采取应对措施。漏洞概述与技术原理CVE-2025-29
  • Next.js 数据获取：方法与实践指南 wangjinjin180 javascript前端数据库
    1.引言Next.js提供了灵活的数据获取机制，支持静态生成（SSG）、服务器端渲染（SSR）和客户端渲染（CSR），适用于不同场景。数据获取是Next.js应用的核心，直接影响页面加载速度、SEO和用户体验。本文将全面探讨PagesRouter和AppRouter（13.x+）中的数据获取方法，提供实现示例和优化建议。2.Next.js数据获取概述2.1数据获取的核心概念SSG（StaticSi
  • 23.ssr和csr的对比？如何依赖node.js实现 xd00002 react.js
    1.为什么说ssr的node中间层请求速度快。相当于内网？那vue.js加载怎么没有ssr和csr的说法啊第一问：为什么说SSR的Node中间层请求速度快？是不是相当于内网？✅是的，本质上就是「内网请求」，所以更快！举个例子：你部署了一个SSR网站，比如用Next.js：•页面在服务器（Node）上先运行•假设你需要从数据库、内部API获取数据SSR下的数据获取流程：[Node.js服务器]←（直
  • 【前端】Next.js的安装及配置 奔跑草- 前端前端javascript开发语言next.jsreact.js
    Next.js介绍Next.js是一个流行的React框架，它具有以下优点：服务器端渲染（SSR）：Next.js支持服务器端渲染，这意味着页面可以在服务器上预渲染，然后发送给用户，这可以加快首屏加载速度，并有利于搜索引擎优化（SEO）。静态站点生成（SSG）：Next.js允许在构建时预渲染页面为静态HTML，这对于不需要频繁更新的内容非常有用，可以提高性能和加载速度。自动代码分割：Next.j
  • 一篇文章入门Next.js：从理论到实战，轻松上手全栈开发 jane_xing 前端开发web开发javascript开发语言ecmascript
    为什么选择Next.js？如果你正在学习前端开发，一定听过React的大名。但React只是一个库，要搭建完整的应用，你还需要路由、数据获取、SEO优化等能力——这时候Next.js就登场了！作为React的“超集框架”，Next.js提供了：开箱即用的服务端渲染（SSR）和静态生成（SSG）零配置路由系统API路由支持全栈开发自动代码分割与优化无缝部署到Vercel等平台无论你是想开发博客、电商
  • 一文了解React、Next.js、Vue、Nuxt和Svelte等框架的最新动态和趋势 前端达人 javascriptreact.jsvue.js前端前端框架
    一起来看看谷歌I/O大会的一篇演讲：关于JavaScript框架生态系统的概述，内容涵盖Angular、Astro、React、Remix、Next.js、Vue、Nuxt、Solid和Svelte等多个框架的最新动态和趋势。在过去的一年左右的时间里，JavaScript框架生态圈发生了许多变化。这份文档简要概述了近期的一些亮点。想要更深入讨论这些话题，可以查看今年GoogleI/O大会上的Jav
  • Nextwind: 探索Next.js、TypeScript和Tailwind CSS的集成 LearningandStudy
    本文还有配套的精品资源，点击获取简介：Nextwind是一个集成Next.js、TypeScript和TailwindCSS的现代化前端开发模板，旨在提供一种高效且美观的开发体验。Next.js框架结合了React的SSR和SSG特性，TypeScript提供了静态类型检查以增强代码质量，而TailwindCSS则以其原子化设计哲学支持快速的样式构建和响应式设计。通过Nextwind，开发者能够享
  • 如何使用 MobX、TypeScript、Next.js 和 Tailwind CSS 开发一个 Shopify 商品列表 薛飞之 独立开发出海之shopifyjavascripttypescriptcss
    项目结构首先，我们需要创建一个新的Next.js项目，并安装所需的依赖项。npxcreate-next-app@latestmy-shopify-store--typescriptcdmy-shopify-storenpminstallmobxmobx-react-litetailwindcsspostcssautoprefixernpxtailwindcssinit-p配置TailwindCSS
  • Next.js中使用Tailwind CSS Green8y0 Next.jsCSScsstypescriptreact
    文章目录前言一、初始化Next.js项目二、添加tailwindcss配置1.安装Tailwind以及其他依赖2.创建Tailwind配置文件3.引入TailwindCSS4.使用TailwindCSS总结前言Next.js中使用tailwindcssdemo：tailwindcss-demo代码仓库一、初始化Next.js项目参考：Next.js官方文档#创建支持typescript的Next.
  • 使用React, Next.js, TailwindCSS和Prisma构建全栈Netflix克隆项目 蒋素萍Marilyn
    使用React,Next.js,TailwindCSS和Prisma构建全栈Netflix克隆项目去发现同类优质开源项目:https://gitcode.com/在这个开放源代码项目中，我们将一起探索如何利用前沿的技术栈，如React、Next.js、TailwindCSS和Prisma，来创建一个功能齐全的全栈Netflix克隆应用。该项目不仅提供了一个详细的教学视频，还包含了完整的代码实现，是
  • 使用基于 TypeScript 的 Next.js 模板进行项目引导 fydw_715 Difyjavascripttypescript前端
    1.Next.js简介1.1什么是Next.jsNext.js是一个基于React的用于构建服务端渲染（SSR）和静态网站生成（SSG）的前端框架。它提供了一系列开箱即用的功能，包括：文件系统路由：基于pages目录的文件结构自动生成路由。服务端渲染（SSR）：在服务器端渲染页面，提高首屏加载速度和SEO优化。静态网站生成（SSG）：预渲染页面，生成静态HTML文件，提升性能。API路由：在pag
  • JVM StackMapTable 属性的作用及理解 lijingyao8206 jvm字节码Class文件StackMapTable
            在Java 6版本之后JVM引入了栈图(Stack Map Table)概念。为了提高验证过程的效率，在字节码规范中添加了Stack Map Table属性，以下简称栈图，其方法的code属性中存储了局部变量和操作数的类型验证以及字节码的偏移量。也就是一个method需要且仅对应一个Stack Map Table。在Java 7版
  • 回调函数调用方法 百合不是茶 java
    最近在看大神写的代码时,.发现其中使用了很多的回调 ,以前只是在学习的时候经常用到 ,现在写个笔记 记录一下   代码很简单:           MainDemo  :调用方法  得到方法的返回结果        
  • [时间机器]制造时间机器需要一些材料 comsci 制造
          根据我的计算和推测,要完全实现制造一台时间机器,需要某些我们这个世界不存在的物质     和材料...       甚至可以这样说,这种材料和物质,我们在反应堆中也无法获得......      
  • 开口埋怨不如闭口做事 邓集海 邓集海 做人 做事 工作
    “开口埋怨，不如闭口做事。”不是名人名言，而是一个普通父亲对儿子的训导。但是，因为这句训导，这位普通父亲却造就了一个名人儿子。这位普通父亲造就的名人儿子，叫张明正。 　　 　　张明正出身贫寒，读书时成绩差，常挨老师批评。高中毕业，张明正连普通大学的分数线都没上。高考成绩出来后，平时开口怨这怨那的张明正，不从自身找原因，而是不停地埋怨自己家庭条件不好、埋怨父母没有给他创造良好的学习环境。 　　 　　
  • jQuery插件开发全解析，类级别与对象级别开发 IT独行者 jquery开发插件　函数
    jQuery插件的开发包括两种： 一种是类级别的插件开发，即给 jQuery添加新的全局函数，相当于给 jQuery类本身添加方法。 jQuery的全局函数就是属于 jQuery命名空间的函数，另一种是对象级别的插件开发，即给 jQuery对象添加方法。下面就两种函数的开发做详细的说明。   1 、类级别的插件开发 类级别的插件开发最直接的理解就是给jQuer
  • Rome解析Rss 413277409 Rome解析Rss
    import java.net.URL;  import java.util.List;    import org.junit.Test;    import com.sun.syndication.feed.synd.SyndCategory;  import com.sun.syndication.feed.synd.S
  • RSA加密解密 无量 加密解密rsa
    RSA加密解密代码 代码有待整理 package com.tongbanjie.commons.util; import java.security.Key; import java.security.KeyFactory; import java.security.KeyPair; import java.security.KeyPairGenerat
  • linux 软件安装遇到的问题 aichenglong linux遇到的问题ftp
    1 ftp配置中遇到的问题    500 OOPS: cannot change directory   出现该问题的原因:是SELinux安装机制的问题.只要disable SELinux就可以了   修改方法:1 修改/etc/selinux/config 中SELINUX=disabled    2 source /etc
  • 面试心得 alafqq 面试
    最近面试了好几家公司。记录下； 支付宝，面试我的人胖胖的，看着人挺好的；博彦外包的职位，面试失败； 阿里金融，面试官人也挺和善，只不过我让他吐血了。。。 由于印象比较深，记录下； 1，自我介绍 2，说下八种基本类型；（算上string。楼主才答了3种，哈哈，string其实不是基本类型，是引用类型） 3，什么是包装类，包装类的优点； 4，平时看过什么书？NND，什么书都没看过。。照样
  • java的多态性探讨 百合不是茶 java
    java的多态性是指main方法在调用属性的时候类可以对这一属性做出反应的情况 //package 1; class A{ public void test(){ System.out.println("A"); } } class D extends A{ public void test(){ S
  • 网络编程基础篇之JavaScript-学习笔记 bijian1013 JavaScript
    1.documentWrite <html> <head> <script language="JavaScript"> document.write("这是电脑网络学校"); document.close(); </script> </h
  • 探索JUnit4扩展：深入Rule bijian1013 JUnitRule单元测试
            本文将进一步探究Rule的应用，展示如何使用Rule来替代@BeforeClass，@AfterClass，@Before和@After的功能。         在上一篇中提到，可以使用Rule替代现有的大部分Runner扩展，而且也不提倡对Runner中的withBefores()，withAfte
  • [CSS]CSS浮动十五条规则 bit1129 css
    这些浮动规则，主要是参考CSS权威指南关于浮动规则的总结，然后添加一些简单的例子以验证和理解这些规则。   1. 所有的页面元素都可以浮动 2. 一个元素浮动后，会成为块级元素，比如<span>,a, strong等都会变成块级元素 3.一个元素左浮动，会向最近的块级父元素的左上角移动，直到浮动元素的左外边界碰到块级父元素的左内边界；如果这个块级父元素已经有浮动元素停靠了
  • 【Kafka六】Kafka Producer和Consumer多Broker、多Partition场景 bit1129 partition
    0.Kafka服务器配置 3个broker 1个topic，6个partition，副本因子是2 2个consumer，每个consumer三个线程并发读取   1. Producer package kafka.examples.multibrokers.producers; import java.util.Properties; import java.util.
  • zabbix_agentd.conf配置文件详解 ronin47 zabbix 配置文件
    Aliaskey的别名，例如 Alias=ttlsa.userid:vfs.file.regexp[/etc/passwd,^ttlsa:.:([0-9]+),,,,\1]， 或者ttlsa的用户ID。你可以使用key：vfs.file.regexp[/etc/passwd,^ttlsa:.: ([0-9]+),,,,\1]，也可以使用ttlsa.userid。备注: 别名不能重复，但是可以有多个
  • java--19.用矩阵求Fibonacci数列的第N项 bylijinnan fibonacci
    参考了网上的思路，写了个Java版的： public class Fibonacci { final static int[] A={1,1,1,0}; public static void main(String[] args) { int n=7; for(int i=0;i<=n;i++){ int f=fibonac
  • Netty源码学习-LengthFieldBasedFrameDecoder bylijinnan javanetty
    先看看LengthFieldBasedFrameDecoder的官方API http://docs.jboss.org/netty/3.1/api/org/jboss/netty/handler/codec/frame/LengthFieldBasedFrameDecoder.html API举例说明了LengthFieldBasedFrameDecoder的解析机制，如下： 实
  • AES加密解密 chicony 加密解密
    AES加解密算法，使用Base64做转码以及辅助加密： package com.wintv.common; import javax.crypto.Cipher; import javax.crypto.spec.IvParameterSpec; import javax.crypto.spec.SecretKeySpec; import sun.misc.BASE64Decod
  • 文件编码格式转换 ctrain 编码格式
    package com.test; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream;
  • mysql 在linux客户端插入数据中文乱码 daizj mysql中文乱码
    1、查看系统客户端，数据库，连接层的编码  查看方法： http://daizj.iteye.com/blog/2174993 进入mysql，通过如下命令查看数据库编码方式： mysql>  show variables like 'character_set_%'; +--------------------------+------
  • 好代码是廉价的代码 dcj3sjt126com 程序员读书
      长久以来我一直主张：好代码是廉价的代码。 当我跟做开发的同事说出这话时，他们的第一反应是一种惊愕，然后是将近一个星期的嘲笑，把它当作一个笑话来讲。 当他们走近看我的表情、知道我是认真的时，才收敛一点。 当最初的惊愕消退后，他们会用一些这样的话来反驳： “好代码不廉价，好代码是采用经过数十年计算机科学研究和积累得出的最佳实践设计模式和方法论建立起来的精心制作的程序代码。” 我只
  • Android网络请求库——android-async-http dcj3sjt126com android
    在iOS开发中有大名鼎鼎的ASIHttpRequest库，用来处理网络请求操作，今天要介绍的是一个在Android上同样强大的网络请求库android-async-http，目前非常火的应用Instagram和Pinterest的Android版就是用的这个网络请求库。这个网络请求库是基于Apache HttpClient库之上的一个异步网络请求处理库，网络处理均基于Android的非UI线程，通
  • ORACLE 复习笔记之SQL语句的优化 eksliang SQL优化Oracle sql语句优化SQL语句的优化
    转载请出自出处：http://eksliang.iteye.com/blog/2097999   SQL语句的优化总结如下   sql语句的优化可以按照如下六个步骤进行： 合理使用索引 避免或者简化排序 消除对大表的扫描 避免复杂的通配符匹配 调整子查询的性能 EXISTS和IN运算符 下面我就按照上面这六个步骤分别进行总结：
  • 浅析：Android 嵌套滑动机制（NestedScrolling） gg163 android移动开发滑动机制嵌套
    谷歌在发布安卓 Lollipop版本之后，为了更好的用户体验，Google为Android的滑动机制提供了NestedScrolling特性 NestedScrolling的特性可以体现在哪里呢？<!--[if !supportLineBreakNewLine]--><!--[endif]--> 比如你使用了Toolbar，下面一个ScrollView，向上滚
  • 使用hovertree菜单作为后台导航 hvt JavaScriptjquery.nethovertreeasp.net
      hovertree是一个jquery菜单插件，官方网址：http://keleyi.com/jq/hovertree/ ，可以登录该网址体验效果。 0.1.3版本：http://keleyi.com/jq/hovertree/demo/demo.0.1.3.htm hovertree插件包含文件： http://keleyi.com/jq/hovertree/css
  • SVG 教程 （二）矩形 天梯梦 svg
    SVG <rect> SVG Shapes SVG有一些预定义的形状元素，可被开发者使用和操作： 矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path>
  • 一个简单的队列 luyulong java数据结构队列
    public class MyQueue { private long[] arr; private int front; private int end; // 有效数据的大小 private int elements; public MyQueue() { arr = new long[10]; elements = 0; front
  • 基础数据结构和算法九：Binary Search Tree sunwinner Algorithm
      A binary search tree (BST) is a binary tree where each node has a Comparable key (and an associated value) and satisfies the restriction that the key in any node is larger than the keys in all
  • 项目出现的一些问题和体会 Steven-Walker DAOWebservlet
         第一篇博客不知道要写点什么，就先来点近阶段的感悟吧。     这几天学了servlet和数据库等知识，就参照老方的视频写了一个简单的增删改查的，完成了最简单的一些功能，使用了三层架构。 dao层完成的是对数据库具体的功能实现，service层调用了dao层的实现方法，具体对servlet提供支持。  &
  • 高手问答：Java老A带你全面提升Java单兵作战能力！ ITeye管理员 java
    本期特邀《Java特种兵》作者：谢宇，CSDN论坛ID: xieyuooo 针对JAVA问题给予大家解答，欢迎网友积极提问，与专家一起讨论! 作者简介： 淘宝网资深Java工程师，CSDN超人气博主，人称“胖哥”。 CSDN博客地址： http://blog.csdn.net/xieyuooo 作者在进入大学前是一个不折不扣的计算机白痴，曾经被人笑话过不懂鼠标是什么，
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他